# Combo (bars and a line)

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

Source: https://82chart.com/en/docs/combo/

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.

```js
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.

```js
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.

> **Use a dual axis with care.** Each axis picks its own range, so the same data can look correlated or opposed depending on those ranges; where the two lines cross and how steep they look mean nothing. That is why it is off by default and opted into per series. When the point is comparison, [two stacked charts with a linked crosshair](https://82chart.com/en/docs/group-sync/) are more honest.