# 차트 묶기 (크로스헤어 공유)

> 단위가 다른 값은 이중 축 대신 위아래 차트로.

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

`group` 이름이 같은 차트끼리는 한 차트에 마우스를 올리면 나머지도 같은 x를 가리킵니다. x 는 라벨 값으로 맞추므로 두 차트의 `labels` 가 같아야 합니다. 매출(원)과 주문 수(건)처럼 단위가 다른 값을 이중 축 없이 함께 읽는 방법입니다.

아래 두 차트 중 하나에 마우스를 올리거나 키보드로 움직여 보세요. 다른 차트도 같은 날짜를 가리킵니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '일별 매출',
  unit: '원',
  group: 'daily',
  height: 200,
  data: { labels: ['10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'], series: [{ name: '매출', data: [2410000, 2650000, 2580000, 2990000, 3420000, 3610000, 3380000] }] },
});
```

```js
createChart('#chart', {
  type: 'line',
  title: '일별 주문 수',
  unit: '건',
  group: 'daily',
  height: 200,
  data: { labels: ['10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'], series: [{ name: '주문', data: [61, 70, 66, 74, 92, 98, 85] }] },
});
```

`setOptions({ group: '다른이름' })` 으로 묶음을 바꿀 수 있고, `destroy()` 하면 묶음에서 빠집니다.