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.
Show the correlated trend of monthly sales (column) and profit rate (line).
Show weekly active users (column) and growth rate (line) trends, with custom colors.
Show quarterly revenue (column) and profit rate, cost rate (dual lines) trends, with custom colors
| 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 | 'default' | 'dark' | 'academy' | optional | Chart theme, default is "default". |
| 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. |
