Charts

Charts use Apache ECharts, bundled locally and tree-shaken (line, bar, pie, radar, scatter, gauge, funnel and heatmap charts, SVG renderer). Every chart reads its colors from the design tokens, so it follows the brand preset, the dark mode, the language (number formats) and the text direction, resizes with its container and is disposed when its page is destroyed.

Add a chart

Use the [oxChart] directive on a container (give it an accessible name) and pass it a builder function:

import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { t } from '@/core/i18n';
import { OxChart, type ChartBuilder } from '@/directives/chart';

@Component({
  selector: 'ox-sales-chart',
  imports: [OxChart],
  templateUrl: './sales-chart.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SalesChart {
  protected readonly t = t;
  private readonly online = [42, 51, 48, 62, 70, 78];
  private readonly stores = [30, 32, 35, 33, 38, 41];

  protected readonly sales: ChartBuilder = (c) => ({
    xAxis: c.category(c.months(6)),
    yAxis: c.value(c.fmt.compactCurrency),
    series: [
      { type: 'bar', name: c.t('reports.sales.online'), data: this.online, itemStyle: { color: c.colors[0] } },
      { type: 'line', name: c.t('reports.sales.stores'), data: this.stores, itemStyle: { color: c.colors[1] } },
    ],
  });
}

<!-- sales-chart.html -->
<section class="fd-card">
  <div class="fd-card__body">
    <div class="fd-chart" role="img" [attr.aria-label]="t('reports.sales.chart')" [oxChart]="sales"></div>
  </div>
</section>

The builder receives a context c with the themed colors (c.colors – the categorical palette, c.primary, c.success, c.text, c.border...), axis helpers (c.category(), c.value(), c.months()), the translator (c.t) and locale-aware formatters (c.fmt). It runs again whenever the theme, the language or the direction changes, so never cache colors outside it.

Update the data

The directive rebuilds the chart when its input changes. Make the builder a computed over your signals:

protected readonly period = signal<'month' | 'quarter'>('month');
protected readonly sales = computed<ChartBuilder>(() => {
  const period = this.period();
  return (c) => ({ /* ...uses period... */ });
});

<div class="fd-chart" role="img" [attr.aria-label]="t('reports.sales.chart')" [oxChart]="sales()"></div>

Charts created by page scripts with chart('#id', (c) => ({ ... })) (from src/core/charts.ts) are re-rendered with refreshCharts().

More examples

The Charts pages (line and area, column and bar, mixed, pie/donut/gauge, radar/scatter/bubble) and the six dashboards contain more than 35 ready-made charts: their options are in src/scripts/charts.ts and src/scripts/dashboards/, and the same option objects work in [oxChart]. To use another ECharts chart type, register it in src/core/charts.ts (echarts.use([...])).