reference-chartjs.md

Chart.js 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 Chart.js backend is the lightweight embedding target for common chart families. It keeps the parameter surface intentionally small.

What this page covers

This reference lists the 22 chart types currently supported by the Chart.js backend, grouped into 5 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.

Connected Scatter Plot

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

No template-specific parameters.

Bubble Chart

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

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

Strip Plot

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

Parameter	Control	Domain	Default	Availability	Description
stepWidth	number	10 – 100 (step 5)	20	always	Jitter spread width.
pointSize	number	0 – 150 (step 5)	0	always	Point or marker size.
opacity	number	0 – 1 (step 0.05)	0	always	Mark opacity.

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

No template-specific parameters.

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.

Combo Chart

Encoding channels: x, y, column, row

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

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.

Waterfall Chart

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

No template-specific parameters.

Gantt Chart

Encoding channels: y, x, x2, color, 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.

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.

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.4	conditional	Mark opacity.
stackMode	choice	Stacked (default) (default), layered (Layered (overlap))	—	always	Stacking strategy for overlapping series.

Range Area Chart

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

No template-specific parameters.

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.

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.
sortSlices	choice	none (Data order), descending (Largest first), ascending (Smallest first)	none	always	Sort slices

Doughnut Chart

Encoding channels: size, color, column, row

Parameter	Control	Domain	Default	Availability	Description
innerRadius	number	20 – 80 (step 5)	55	always	Inner radius as a percentage of the outer radius.
sortSlices	choice	none (Data order), descending (Largest first), ascending (Smallest first)	none	always	Sort slices

Polar

Radar Chart

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

Parameter	Control	Domain	Default	Availability	Description
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