문서 › 레퍼런스

이벤트

click, hover, legendclick, zoom, ready, render, destroy.

chart.on(이름, 함수) 로 받고 chart.off(이름, 함수) 로 뗍니다. 아래 차트에 마우스를 올리거나 눌러 보세요.

움직이는 예제

차트를 누르거나 키보드로 움직여 보세요.

이 예제의 코드

const chart = createChart('#chart', {
  type: 'bar',
  title: '요일별 주문',
  unit: '건',
  data: {
    labels: ['월', '화', '수', '목', '금'],
    series: [{ name: '주문', data: [61, 70, 66, 74, 92] }],
  },
});
chart.on('click', (p) => log({ click: p.x, y: p.y, series: p.seriesName }));
chart.on('hover', (p) => p && log('hover ' + p.x));

이벤트	받는 값	언제
`click`	`ChartPoint`	점·막대·조각을 누르거나 Enter (옵션 `onClick` 과 같음)
`hover`	`ChartPoint \| null`	마우스가 옮겨 갈 때, 벗어나면 null
`legendclick`	`{ seriesIndex, visible }`	범례로 켜고 끌 때
`zoom`	`{ start, end } \| null`	확대 범위가 바뀔 때 (x 인덱스)
`ready`	`Chart`	만든 직후 한 번 (옵션 `onReady` 와 같음)
`render`	`Chart`	다시 그릴 때마다
`destroy`	-	`destroy()` 할 때

ChartPoint

{
  seriesIndex: 0,
  seriesName: '주문',
  index: 4,          // x 순서
  x: '금',            // 라벨, 숫자 또는 날짜
  y: 92,
  percent?: 31.5,     // 파이·도넛·100% 누적일 때 비율
  color: '#3182f6',
}