# Linked charts (shared crosshair)

> Different units: two charts with one crosshair instead of a dual axis.

Source: https://82chart.com/en/docs/group-sync/

Charts with the same `group` name share the crosshair: hover one and the others point at the same x. They match by label value, so give them the same `labels`. It is how to read values with different units together without a dual axis.

Hover either chart below, or move through it with the keyboard: the other one points at the same day.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Daily sales',
  prefix: '$',
  group: 'daily',
  height: 200,
  data: { labels: ['Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'], series: [{ name: 'Sales', data: [2410, 2650, 2580, 2990, 3420, 3610, 3380] }] },
});
```

```js
createChart('#chart', {
  type: 'line',
  title: 'Daily orders',
  group: 'daily',
  height: 200,
  data: { labels: ['Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'], series: [{ name: 'Orders', data: [61, 70, 66, 74, 92, 98, 85] }] },
});
```

Move a chart to another group with `setOptions({ group: 'other' })`; `destroy()` takes it out.
