Skip to content
Domphy

@domphy/chart

ECharts-grade charting for Domphy. WebGL-accelerated series for performance-critical data, SVG series for complex layouts. Full parity with ECharts including geo maps, calendar, parallel coordinates, ThemeRiver, and 3D charts. 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; horizontal when yAxis: "category" + xAxis: "value"
scattersymbolSize (number or (val) => number)
pieradius (number or [inner, outer]), roseType, center
radarareaStyle, paired with radar.indicator[]
heatmapcartesian or coordinateSystem: "calendar" with visualMap
candlestickdata: [open,close,low,high][], itemStyle.color/color0
gaugemin/max, splitNumber, detail.formatter

SVG (layout & flow):

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"
parallelmulti-dim polylines across parallelAxis[]
themeRiverstream graph; data: [[time, value, name], ...]
mapchoropleth; geo + registerMap(name, geoJSON)
linesflow map arcs; data: [{coords: [[lng,lat],[lng,lat]]}], optional effect dot animation
effectScatterscatter with SVG ripple animation; rippleEffect: {period, scale, brushType}
pictorialBarbar with symbol shapes; symbol, symbolRepeat, symbolClip
customrenderItem(params, api) returns SVG element descriptor

3D (SVG perspective projection):

SeriesKey options
scatter3Ddata: [x,y,z][], symbolSize
bar3Ddata: [x,y,z][], barSize
line3Ddata: [x,y,z][], lineWidth
surface3Dstructured grid data: [x,y,z][], shapeW, shapeH, wireframe

Next steps