Class UIChart<T>

Generic data-chart component that delegates rendering to a GraphPresentationStrategy.

Accepts either a single data array (source) or multiple layers (sources) and extracts labels / values via the labelProperty and valueProperty inputs. The chosen strategy renders the chart as either an SVG element or raw ImageData; the component inserts the result into the DOM automatically.

A legend is rendered below the chart.

Example: Single-series (backward-compatible)

<ui-chart
  [source]="salesData"
  labelProperty="month"
  valueProperty="revenue"
  [strategy]="barStrategy"
/>

Example: Multi-series — same data, different value columns

<ui-chart
  [source]="salesData"
  labelProperty="month"
  valueProperty="revenue"
  [sources]="[
    { name: 'Revenue', valueProperty: 'revenue' },
    { name: 'Cost',    valueProperty: 'cost' }
  ]"
  [strategy]="lineStrategy"
/>

Example: Multi-series — different data arrays

<ui-chart
  labelProperty="month"
  valueProperty="revenue"
  [sources]="[
    { name: '2024', data: sales2024 },
    { name: '2025', data: sales2025 }
  ]"
  [strategy]="barStrategy"
/>

Type Parameters

Index

Constructors

constructor

Properties

ariaLabel coloring height isMultiSeries labelProperty legendEntries palette seriesData showLegend size source sources strategy valueProperty width

Constructors

constructor

new UIChart<T>(): UIChart<T>
Type Parameters
- T
Returns UIChart<T>
- Defined in packages/ui-kit/src/lib/chart/chart.component.ts:192

Properties

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label for the chart region.

`Readonly`coloring

coloring: InputSignal<ChartColoringStrategy> = ...

Color treatment applied after data extraction. Defaults to classic.

`Readonly`height

height: InputSignal<number> = ...

Height of the chart in CSS pixels.

`Protected` `Readonly`isMultiSeries

isMultiSeries: Signal<boolean> = ...

Whether we are rendering multiple named series.

`Readonly`labelProperty

labelProperty: InputSignal<keyof T> = ...

Property name on T whose value is used as the label string.

`Protected` `Readonly`legendEntries

legendEntries: Signal<ChartLegendEntry[]> = ...

Legend entries — per-point for single-series, per-series for multi.

`Readonly`palette

palette: InputSignal<readonly string[]> = ...

Custom colour palette. Falls back to the 12-colour default.

`Protected` `Readonly`seriesData

seriesData: Signal<readonly ChartSeriesData[]> = ...

Processed series data ready for strategy rendering.

`Readonly`showLegend

showLegend: InputSignal<boolean> = ...

Whether to show the legend beneath the chart.

`Protected` `Readonly`size

size: Signal<ChartSize> = ...

Target render size.

`Readonly`source

source: InputSignal<readonly T[]> = ...

Array of data objects to chart (single-series convenience).

`Readonly`sources

sources: InputSignal<readonly ChartLayer<T>[]> = ...

Multiple data layers for multi-series charts.

When non-empty, each ChartLayer defines a named series. Layers share labelProperty and fall back to the component-level source and valueProperty unless overridden per-layer.

`Readonly`strategy

strategy: InputSignal<GraphPresentationStrategy> = ...

Presentation strategy (line, bar, pie, or custom).

`Readonly`valueProperty

valueProperty: InputSignal<keyof T> = ...

Property name on T whose value is used as the numeric value.

`Readonly`width

width: InputSignal<number> = ...

Width of the chart in CSS pixels.

Class UIChart<T>

Example: Single-series (backward-compatible)

Example: Multi-series — same data, different value columns

Example: Multi-series — different data arrays

Type Parameters

Index

Constructors

Properties

Constructors

constructor

Type Parameters

Returns UIChart<T>

Properties

`Readonly`ariaLabel

`Readonly`coloring

`Readonly`height

`Protected` `Readonly`isMultiSeries

`Readonly`labelProperty

`Protected` `Readonly`legendEntries

`Readonly`palette

`Protected` `Readonly`seriesData

`Readonly`showLegend

`Protected` `Readonly`size

`Readonly`source

`Readonly`sources

`Readonly`strategy

`Readonly`valueProperty

`Readonly`width

Settings

On This Page

Class UIChart<T>

Example: Single-series (backward-compatible)

Example: Multi-series — same data, different value columns

Example: Multi-series — different data arrays

Type Parameters

Index

Constructors

Properties

Constructors

constructor

Type Parameters

Returns UIChart<T>

Properties

ReadonlyariaLabel

Readonlycoloring

Readonlyheight

Protected ReadonlyisMultiSeries

ReadonlylabelProperty

Protected ReadonlylegendEntries

Readonlypalette

Protected ReadonlyseriesData

ReadonlyshowLegend

Protected Readonlysize

Readonlysource

Readonlysources

Readonlystrategy

ReadonlyvalueProperty

Readonlywidth

Settings

On This Page

`Readonly`ariaLabel

`Readonly`coloring

`Readonly`height

`Protected` `Readonly`isMultiSeries

`Readonly`labelProperty

`Protected` `Readonly`legendEntries

`Readonly`palette

`Protected` `Readonly`seriesData

`Readonly`showLegend

`Protected` `Readonly`size

`Readonly`source

`Readonly`sources

`Readonly`strategy

`Readonly`valueProperty

`Readonly`width