@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    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.

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

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

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

    Type Parameters

    • T
    Index

    Constructors

    constructor

    Properties

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

    Constructors

    • Type Parameters

      • T

      Returns UIChart<T>

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the chart region.

    height: InputSignal<number> = ...

    Height of the chart in CSS pixels.

    isMultiSeries: Signal<boolean> = ...

    Whether we are rendering multiple named series.

    labelProperty: InputSignal<keyof T> = ...

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

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

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

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

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

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

    Processed series data ready for strategy rendering.

    showLegend: InputSignal<boolean> = ...

    Whether to show the legend beneath the chart.

    size: Signal<ChartSize> = ...

    Target render size.

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

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

    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.

    strategy: InputSignal<GraphPresentationStrategy> = ...

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

    valueProperty: InputSignal<keyof T> = ...

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

    width: InputSignal<number> = ...

    Width of the chart in CSS pixels.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties