Docs › Chart types

Combo (bars and a line)

Mix series types in one chart, with an opt-in right y axis for a second unit.

Give each series its own type to mix them: bars with a line on top, like the common "daily sales with a 7-day average" in admin dashboards. When both series share a unit, one y axis is enough.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Daily sales and 7-day average',
  prefix: '$',
  data: {
    labels: ['Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12', 'Oct 13', 'Oct 14', 'Oct 15', 'Oct 16', 'Oct 17'],
    series: [
      { name: 'Sales', data: [3120, 2870, 3540, 4210, 3980, 2650, 2410, 3390, 3710, 3060] },
      { name: '7-day average', type: 'line', smooth: true, data: [3010, 3050, 3110, 3240, 3330, 3310, 3250, 3290, 3310, 3260] },
    ],
  },
});

Dual y axis (opt-in)

For two values with different units, such as "monthly revenue bars + year-over-year change (%) line", give a series axis: 'right' and a second axis appears on the right. Its ticks, unit and title come from y2Axis. If no series uses axis: 'right', there is one axis exactly as before.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Monthly revenue and YoY change',
  prefix: '$',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      { name: 'Revenue', data: [182000, 164000, 201000, 223000, 248000, 236000] },
      { name: 'YoY change', type: 'line', axis: 'right', data: [4.2, -2.1, 6.8, 9.5, 12.3, 7.4] },
    ],
  },
  y2Axis: { unit: '%', title: 'YoY change' },
});

The right axis gets as many intervals as the left one, so both sets of numbers sit on the same grid lines. With min, max, step or ticks in y2Axis it follows those instead, and the grid follows the left axis.
The right axis does not inherit the chart's unit, prefix or scale (it measures something else). It inherits only the number style (K/M, 만·억) and decimals; set its unit with y2Axis.unit / y2Axis.prefix and its style with y2Axis.format ('percent', 'comma' or a function).
Tooltips and the table write each series in its own axis' format, and the legend marks right-axis series with (R) (Korean (우); change it with locale.rightAxis).
Right-axis series never stack onto left ones. Horizontal bars do not support it.