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, and resizes with its container.

Add a chart

1. A container in the Razor page (give it an accessible name):

<section class="fd-card">
  <div class="fd-card__body">
    <div class="fd-chart" id="sales-chart" role="img" aria-label="@L["reports.sales.chart"]"></div>
  </div>
</section>

2. The chart in the page script (ViewData["Module"] = "reports" on the page):

// ClientApp/js/pages/reports.ts
import { chart } from '../core/charts.ts';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];

export function init(): void {
  chart('#sales-chart', (c) => ({
    xAxis: c.category(months),
    yAxis: c.value(c.fmt.compactCurrency),
    series: [
      { type: 'bar', name: 'Online', data: [42, 51, 48, 62, 70, 78], itemStyle: { color: c.colors[0] } },
      { type: 'line', name: 'Stores', data: [30, 32, 35, 33, 38, 41], itemStyle: { color: c.colors[1] } },
    ],
  }));
}

The callback 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()) and locale-aware formatters (c.fmt). It runs again whenever the theme, the language or the direction changes, so never cache colors outside it.

3. Data from the server. Render the values into the page, for example as JSON in a data attribute, and read them in the page script:

<div class="fd-chart" id="sales-chart" role="img" aria-label="@L["reports.sales.chart"]"
     data-series="@System.Text.Json.JsonSerializer.Serialize(Model.Sales)"></div>

const data = JSON.parse(document.querySelector<HTMLElement>('#sales-chart')!.dataset.series ?? '[]') as number[];

Or fetch them from an endpoint of your app (app.MapGet("/api/reports/sales", ...)) and call refreshCharts() after updating the data:

import { refreshCharts } from '../core/charts.ts';
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 ClientApp/js/pages/charts.ts and ClientApp/js/pages/dashboards/. To use another ECharts chart type, register it in ClientApp/js/core/charts.ts (echarts.use([...])).