Phi / Charts

Installation

Charts require ECharts. Consumers register only the ECharts modules they use.

pnpm add echarts

import * as echarts from "echarts/core";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import {
  AriaComponent,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  ToolboxComponent,
  TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  AriaComponent,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  ToolboxComponent,
  TooltipComponent,
  CanvasRenderer,
]);

Imports

Import charts from their dedicated module. This keeps ECharts optional for other Phi components.

import { Chart, TimeseriesChart, BubbleMap, ChoroplethMap, ChartLegend, ChartPalette } from "@dicehub/phi/components/chart";

Available Charts

Timeseries ChartA specialized chart for displaying time-based data.

Custom ChartLow-level access for custom ECharts options.

Color System

Use semantic colors for stateful data, categorical colors for series, and sequential colors for density.

Legend

Use chart legend items to display series names, values, units, inactive states, and loading placeholders.

LargeItem

SmallItem

API Reference

Prop	Type	Default	Description
`echarts`	`typeof echarts`	`-`	ECharts core instance with the required modules registered.
`options`	`PhiChartOption`	`-`	ECharts option object passed through to setOption.
`optionUpdateBehavior`	`SetOptionOpts`	`-`	Additional options passed to chart.setOption.
`className`	`string`	`-`	Optional class passed to the chart element.
`aspectRatio`	`number \| string`	`-`	Responsive container ratio used when height is not set.
`height`	`number`	`350`	Chart container height in pixels.
`isDarkMode`	`boolean`	`false`	Initializes ECharts with dark mode and dark chart colors.
`onEvents`	`Partial<ChartEvents>`	`-`	Event handlers registered on the ECharts instance.