STATISTICS / CHART GUIDE

Dual Axes Chart

A dual-axes chart is a combination chart that combines two different chart types, typically displaying a column chart and a line chart together.

01 / EXPLORE

See it in action.

Switch to Code to copy an example.

About Dual Axes Chart

A dual-axes chart is a combination chart that combines two different chart types, typically displaying a column chart and a line chart together. By using two vertical Y-axes (left and right) in one chart, it corresponds to different numerical dimensions. The column chart shows the magnitude or quantity of one set of data, while the line chart shows the trend of another set of data. Dual-axes charts are ideal for simultaneously displaying trends of different types of data.

02 / CONFIGURE

Make it yours.

The properties available for this chart.

Configuration Options

Property	Type	Required	Description
`type`	`string`	required	Value must be "dual-axes".
`categories`	`string[]`	required	X-axis categories.
`title`	`string`	optional	Chart title.
`axisXTitle`	`string`	optional	X-axis title.
`series`	`Object[]`	required	Chart composition, each object represents a basic chart.
`series.type`	`'column' \| 'line'`	required	"column" for column chart, "line" for line chart.
`series.data`	`number[]`	required	Basic chart data.
`series.axisYTitle`	`string`	optional	Y-axis title for this series.
`theme`	`BuiltinThemeName \| ThemeSpec`	optional	Built-in theme name or custom theme object; default is "default". See Documentation → Custom Themes.
`style`	`Object`	optional	Chart style.
`style.backgroundColor`	`string`	optional	Must be a valid color value.
`style.palette`	`string[]`	optional	Must be an array of valid color values.
`style.startAtZero`	`boolean`	optional	Whether the Y-axis starts from zero, default is false.