ECharts chart reference

This page is generated from the live chart-template registry (scripts/gen-chart-reference.ts). Do not edit it by hand — run npm run gen:reference.

The ECharts backend targets interactive, canvas-rendered charts and covers several structures outside Vega-Lite's scope: sunburst, treemap, sankey, gauge, graph, tree, parallel coordinates, and calendar heatmap.

What this page covers

This reference lists the 37 chart types currently supported by the ECharts backend, grouped into 10 categories. Each chart entry shows:

Encoding channels — the visual roles accepted in chart_spec.encodings, such as x, y, color, size, column, or row.
Options — template-specific chart_spec.chartProperties keys, including control type, domain, default, availability, and description.

Use the chart type name exactly as shown in chart_spec.chartType.

How to set encodings and options

Set encodings in chart_spec.encodings and chart-specific options in chart_spec.chartProperties. Option keys match the parameter names below:

{
  "chartType": "Bar Chart",
  "encodings": { "x": { "field": "category" }, "y": { "field": "value" } },
  "chartProperties": { "cornerRadius": 4, "stackMode": "normalize" }
}

The Availability column shows whether a parameter is always available or conditional, meaning it appears only when the data and encodings make it relevant. For example, log-scale controls appear only on wide-range axes. Non-applicable parameters are safe to pass; the assembler ignores them.

Scatter & Point

Scatter Plot

Encoding channels: x, y, color, size, opacity, column, row

Parameter	Control	Domain	Default	Availability	Description
`opacity`	number	0.1 – 1 (step 0.05)	`1`	always	Mark opacity.

Regression

Encoding channels: x, y, size, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`regressionMethod`	choice	`linear` (Linear), `log` (Logarithmic), `exp` (Exponential), `pow` (Power), `quad` (Quadratic), `poly` (Polynomial)	`linear`	always	Regression fit method.
`polyOrder`	number	2 – 10 (step 1)	`3`	always	Polynomial order for the regression fit.

Connected Scatter Plot

Encoding channels: x, y, order, color, detail, column, row

No template-specific parameters.

Ranged Dot Plot

Encoding channels: x, y, color

No template-specific parameters.

Boxplot

Encoding channels: x, y, color, opacity, column, row

Parameter	Control	Domain	Default	Availability	Description
`whiskerMethod`	choice	`iqr` (Tukey (1.5 × IQR)), `minmax` (Min–Max)	`iqr`	always	Whiskers
`showPoints`	toggle	on / off	`false`	conditional	Overlay point markers on the line.
`showOutliers`	toggle	on / off	`true`	conditional	Outliers
`dodge`	choice	`auto` (Auto), `local` (Local (compact)), `global` (Global (aligned))	`auto`	conditional	Dodge

Strip Plot

Encoding channels: x, y, color, size, column, row

No template-specific parameters.

Bar

Bar Chart

Encoding channels: x, y, color, opacity, column, row

Parameter	Control	Domain	Default	Availability	Description
`cornerRadius`	number	0 – 15 (step 1)	`0`	always	Corner radius for supported marks.

Grouped Bar Chart

Encoding channels: x, y, group, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`dodge`	choice	`auto` (Auto), `local` (Local (compact)), `global` (Global (aligned))	`auto`	conditional	Dodge

Stacked Bar Chart

Encoding channels: x, y, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`stackMode`	choice	Stacked (default) (default), `normalize` (Normalize (100%))	—	conditional	Stacking strategy for overlapping series.

Lollipop Chart

Encoding channels: x, y, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`dotSize`	number	20 – 300 (step 10)	`80`	always	Size of the dot mark.

Pyramid Chart

Encoding channels: x, y, color

No template-specific parameters.

Heatmap

Encoding channels: x, y, color, column, row

No template-specific parameters.

Calendar Heatmap

Encoding channels: x, color

No template-specific parameters.

Line & Area

Line Chart

Encoding channels: x, y, color, opacity, column, row

Parameter	Control	Domain	Default	Availability	Description
`interpolate`	choice	Default (linear) (default), `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom)	—	always	Line or area interpolation method.
`showPoints`	toggle	on / off	`false`	always	Overlay point markers on the line.

Bump Chart

Encoding channels: x, y, color, detail, column, row

No template-specific parameters.

Slope Chart

Encoding channels: x, y, color, detail, column, row

No template-specific parameters.

Area Chart

Encoding channels: x, y, color, opacity, column, row

Parameter	Control	Domain	Default	Availability	Description
`interpolate`	choice	Default (linear) (default), `linear` (Linear), `monotone` (Monotone (smooth)), `step` (Step), `step-before` (Step Before), `step-after` (Step After), `basis` (Basis (smooth)), `cardinal` (Cardinal), `catmull-rom` (Catmull-Rom)	—	always	Line or area interpolation method.
`opacity`	number	0.1 – 1 (step 0.05)	`0.7`	conditional	Mark opacity.
`stackMode`	choice	Stacked (default) (default), `normalize` (Normalize (100%)), `center` (Center), `layered` (Layered (overlap))	—	always	Stacking strategy for overlapping series.

Streamgraph

Encoding channels: x, y, color, column, row

No template-specific parameters.

Range Area Chart

Encoding channels: x, y, y2, color, column, row

No template-specific parameters.

Part-to-Whole

Pie Chart

Encoding channels: size, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`innerRadius`	number	0 – 60 (step 5)	`0`	always	Inner radius as a percentage of the outer radius.
`cornerRadius`	number	0 – 10 (step 1)	`0`	always	Corner radius for supported marks.
`sortSlices`	choice	`none` (Data order), `descending` (Largest first), `ascending` (Smallest first)	`none`	always	Sort slices
`labelType`	choice	`categoryPercent` (Name + %), `category` (Name), `value` (Value), `percent` (Percent), `none` (None)	`categoryPercent`	always	Labels

Funnel Chart

Encoding channels: y, size

Parameter	Control	Domain	Default	Availability	Description
`sort`	choice	`descending` (Descending (default)), `ascending` (Ascending), `none` (Original order)	—	always	Sort order for ordered stages or categories.
`orient`	choice	`vertical` (Vertical (default)), `horizontal` (Horizontal)	—	always	Chart orientation.
`gap`	number	0 – 20 (step 1)	`2`	always	Gap between segments.

Treemap

Encoding channels: color, size, detail

Parameter	Control	Domain	Default	Availability	Description
`breadcrumb`	choice	`true` (Show (default)), `false` (Hide)	—	always	Show or hide treemap breadcrumb navigation.

Sunburst Chart

Encoding channels: color, size, detail, group

Parameter	Control	Domain	Default	Availability	Description
`innerRadius`	number	0 – 80 (step 5)	`0`	always	Inner radius as a percentage of the outer radius.
`labelRotate`	choice	`radial` (Radial (default)), `tangential` (Tangential), `0` (Horizontal)	—	always	Label orientation for sunburst sectors.

Tree

Encoding channels: color, detail, size

Parameter	Control	Domain	Default	Availability	Description
`orient`	choice	`LR` (Left → Right (default)), `TB` (Top → Bottom)	—	always	Chart orientation.

Statistical

Histogram

Encoding channels: x, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`binCount`	number	5 – 50 (step 1)	`Auto`	always	Maximum bin cap; Auto lets the backend choose.

Density Plot

Encoding channels: x, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`bandwidth`	number	0.05 – 2 (step 0.05)	`0`	always	Kernel-density bandwidth (0 = auto).

ECDF Plot

Encoding channels: x, color, detail, column, row

Parameter	Control	Domain	Default	Availability	Description
`showPoints`	toggle	on / off	`false`	always	Overlay point markers on the line.

Parallel Coordinates

Encoding channels: color, detail

No template-specific parameters.

Financial

Candlestick Chart

Encoding channels: x, open, high, low, close, column, row

Parameter	Control	Domain	Default	Availability	Description
`showMA`	toggle	on / off	`false`	always	Show a moving-average overlay.
`maWindow`	number	3 – 30 (step 1)	`5`	always	Moving-average window size.

Other

Waterfall Chart

Encoding channels: x, y, color, column, row

No template-specific parameters.

Gantt Chart

Encoding channels: y, x, x2, color, detail, column, row

Parameter	Control	Domain	Default	Availability	Description
`taskHeight`	number	40 – 90 (step 5)	`70`	always	Task bar height as a percentage of each row.
`cornerRadius`	number	0 – 8 (step 1)	`2`	always	Corner radius for supported marks.
`intervalLabels`	toggle	on / off	`false`	always	Text shown on task intervals.

Bullet Chart

Encoding channels: y, x, goal, color, column, row

No template-specific parameters.

Polar

Radar Chart

Encoding channels: x, y, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`shape`	choice	Polygon (default) (default), `circle` (Circle)	—	always	Grid
`filled`	choice	`true` (Filled (default)), `false` (Outline only)	—	always	Fill the enclosed radar area.
`fillOpacity`	number	0.05 – 0.8 (step 0.05)	`0.3`	always	Fill opacity for the area or region.

Rose Chart

Encoding channels: x, y, color, column, row

Parameter	Control	Domain	Default	Availability	Description
`alignment`	choice	`left` (Left (default)), `center` (Center)	—	always	Segment alignment for radial charts.
`sortSlices`	choice	`none` (Data order), `descending` (Largest first), `ascending` (Smallest first)	`none`	always	Sort slices

Indicator

Gauge Chart

Encoding channels: size, column

Parameter	Control	Domain	Default	Availability	Description
`min`	number	0 – 1000 (step 10)	`0`	always	Min
`max`	number	0 – 10000 (step 100)	`100`	always	Max
`showProgress`	choice	`true` (Show (default)), `false` (Hide)	—	always	Progress

Flow

Sankey Diagram

Encoding channels: x, y, size

Parameter	Control	Domain	Default	Availability	Description
`orient`	choice	`horizontal` (Horizontal (default)), `vertical` (Vertical)	—	always	Chart orientation.
`nodeWidth`	number	5 – 40 (step 5)	`20`	always	Node Width
`nodeGap`	number	2 – 30 (step 2)	`10`	always	Node Gap

Network Graph

Encoding channels: x, y, size

Parameter	Control	Domain	Default	Availability	Description
`layout`	choice	`circular` (Circular (default)), `force` (Force-directed)	—	always	Layout

FilesExpand file tree

reference-echarts.md

Latest commit

History

reference-echarts.md

File metadata and controls

ECharts chart reference

What this page covers

How to set encodings and options

Scatter & Point

Scatter Plot

Regression

Connected Scatter Plot

Ranged Dot Plot

Boxplot

Strip Plot

Bar

Bar Chart

Grouped Bar Chart

Stacked Bar Chart

Lollipop Chart

Pyramid Chart

Heatmap

Calendar Heatmap

Line & Area

Line Chart

Bump Chart

Slope Chart

Area Chart

Streamgraph

Range Area Chart

Part-to-Whole

Pie Chart

Funnel Chart

Treemap

Sunburst Chart

Tree

Statistical

Histogram

Density Plot

ECDF Plot

Parallel Coordinates

Financial

Candlestick Chart

Other

Waterfall Chart

Gantt Chart

Bullet Chart

Polar

Radar Chart

Rose Chart

Indicator

Gauge Chart

Flow

Sankey Diagram

Network Graph