Domphy

@domphy/chart

ECharts-grade charting for Domphy. WebGL-accelerated series for performance-critical data, SVG series for complex layouts. No React dependency.

Install

npm install @domphy/chart

Quick start — chart() patch

The easiest way: apply the chart() patch to any div. It creates and manages a ChartEngine internally.

import { chart } from "@domphy/chart"
import type { ChartOption } from "@domphy/chart"

const option: ChartOption = {
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [120, 200, 150, 80, 70] }],
}

const App = {
  div: null,
  style: { width: "600px", height: "300px", position: "relative" },
  $: [chart(option)],
}

To update the chart reactively, pass a State<ChartOption>:

import { toState } from "@domphy/core"
import { chart } from "@domphy/chart"

const option = toState<ChartOption>({
  series: [{ type: "line", data: [1, 2, 3] }],
})

const App = {
  div: null,
  style: { width: "600px", height: "300px", position: "relative" },
  $: [chart(option)],
}

// Update later:
option.set({ series: [{ type: "line", data: [4, 5, 6] }] })

The chart re-renders whenever the state changes.

Supported series

WebGL (hardware-accelerated):

SeriesKey options
linesmooth, step, areaStyle, connectNulls, stack
barstack, label, grouped via multiple series
scattersymbolSize (number or (val) => number)
pieradius (number or [inner, outer]), roseType, center
radarareaStyle, paired with radar.indicator[]
heatmappaired with xAxis/yAxis category + visualMap
candlestickdata: [open,close,low,high][], itemStyle.color/color0
gaugemin/max, splitNumber, detail.formatter

SVG:

SeriesKey options
boxplotdata: [min,Q1,median,Q3,max][]
funneldata: [{value,name}] sorted descending
treemapdata with nested children, squarified layout
sankeynodes: [{name}], links: [{source,target,value}]
graphnodes, links, categories, layout: "force"|"circular"|"none"

Next steps