@domphy/chart vs ECharts#

Series coverage#

Architecture#

Color system#

This is the biggest architectural difference.

ECharts hardcodes palette hex values:

// ECharts default — breaks in dark mode, no contrast guarantee
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', ...]

@domphy/chart uses theme families that resolve at render time:

// Adapts to any dataTone context, WCAG 4.5:1 guaranteed
series: [
  { type: "line", color: "primary" },    // resolves via themeColor()
  { type: "bar",  color: "secondary" },  // follows dataTone cascade of parent
]

Set dataTone="shift-14" on the chart container → all series colors adapt to the dark tone automatically. Zero manual dark-mode config.

Spacing / density cascade#

Components#

Bundle size#

Migration from ECharts#

The ChartOption interface is intentionally ECharts-compatible. Most options migrate without changes:

// ECharts
echarts.init(document.getElementById("chart")).setOption({
  xAxis: { type: "category", data: ["Mon","Tue","Wed"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [120, 200, 150] }],
})

// @domphy/chart — same option object, different mount
import { chart } from "@domphy/chart"
const App = {
  div: null,
  style: { width: "600px", height: "300px" },
  $: [chart({
    xAxis: { type: "category", data: ["Mon","Tue","Wed"] },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: [120, 200, 150] }],
  })],
}

Option keys typed for interop that have no effect#

The ChartOption type is deliberately ECharts-shaped so a pasted option compiles. Some of those keys are not rendered. The table below is measured, not curated: packages/chart/scripts/inert-keys.mjs walks src/ at run time and looks for a read of each key declared in types.ts (as .key, ["key"], ['key'] or a template-literal reference). Measured 2026-09: 410 of 1549 key declarations (202 of 443 distinct key names) have no reader anywhere in src/.

Every one of them carries a @deprecated Not implemented by @domphy/chart JSDoc marker on its declaration in the published types, so an editor strikes the key through at the call site instead of letting it look supported. node packages/chart/scripts/mark-inert-keys.mjs re-derives those markers, and packages/chart/tests/inert-keys-honest.test.ts fails if a marker and the source grep ever disagree.

Setting one of the bold keys additionally logs a one-time console warning at runtime.

option.brush (rect/lineX/lineY drag-select, brushSelected) IS implemented — see Brush — but only brushType: "rect" | "lineX" | "lineY" render; a "polygon" value (in brush.brushType or toolbox.feature.brush.type) warns at runtime without showing up in the table as a single key. A custom series' renderItem IS called — see Custom series — but only for coordinateSystem: "cartesian2d" (the default) or "none"; "polar"/"geo" custom series are typed but not rendered, and warn instead. Top-level radiusAxis/angleAxis are inert because polar series are not rendered — the polar coordinate math exists but nothing draws through it.

The animation*, progressiveThreshold and largeThreshold keys are deliberately not warned about at runtime: they change timing or a performance hint rather than what is drawn, and warning on them would fire on nearly every pasted ECharts option. (z, zlevel and silent are no longer on this list — they are read.)

Key differences when migrating:

• color in a series accepts a ThemeFamily string ("primary") as well as the "#hex" / "rgb()" / "var(--…)" values ECharts takes. Prefer the family name so the series follows the theme; an omitted color falls back to the palette entry for the series' index in option.series.
• No echarts.init() — use the chart() patch directly
• No setOption() — pass a State<ChartOption> for reactive updates
• tooltip.formatter can return a DomphyElement (plain object) in addition to a string
• chart.on("click", …) is chart(option, { click }) on the patch, or engine.on("click", …) on ChartEngine. selectchanged and brushSelected are wired the same way; those three are the only events.
• emphasis / blur / select / selectedMode work on line, bar, scatter, pie, radar, heatmap, candlestick, gauge, boxplot and funnel, at series level (not per data item), and are opt-in — see Interaction & Events. Per-datum mouse hover/click hit-testing reaches all ten (heatmap cell rect, candlestick/boxplot body+wick box, radar polygon, funnel trapezoid, gauge progress arc — each the same geometry its renderer paints from). On every other series type the keys are still inert and marked @deprecated.