[javascript] ApexCharts에서 데이터에 대한 툴팁 설정하기

30 Nov 2023

javascript

먼저, ApexCharts를 웹 페이지에 추가한 후 차트를 생성합니다. 예를 들어 바 차트를 생성하는 코드는 다음과 같습니다:

// HTML에서 차트를 보여줄 요소 선택
const chartElement = document.querySelector('#chart');

// 차트 생성
const chart = new ApexCharts(chartElement, {
  chart: {
    type: 'bar',
  },
  series: [{
    name: '피자 판매량',
    data: [45, 70, 80, 64, 70],
  }],
  xaxis: {
    categories: ['월', '화', '수', '목', '금'],
  },
});

// 차트 표시
chart.render();

다음으로, 툴팁을 설정하기 위해 tooltip 객체를 사용합니다. tooltip 객체에는 다양한 옵션을 설정할 수 있습니다. 예를 들어, enabled 옵션을 사용하여 툴팁을 활성화할 수 있습니다. 기본적으로 툴팁은 활성화되어 있습니다. 또한 x 및 y 옵션을 사용하여 툴팁의 위치를 조정할 수 있습니다. 다음은 tooltip 객체의 사용 예입니다:

// 툴팁 옵션 설정
chart.options.tooltip = {
  enabled: true,  // 툴팁 활성화
  x: {
    show: true,  // x 축 툴팁 표시
    format: 'dd MMM',  // x 축 날짜 형식
  },
  y: {
    formatter: (value) => `${value} 개`,  // y 축 값 형식
  },
};

이제 차트를 다시 렌더링하면 설정한 툴팁이 적용됩니다. 툴팁은 데이터 포인트 위에 마우스를 올리면 표시됩니다. x 옵션을 사용하여 날짜 형식을 지정하거나 y 옵션을 사용하여 값 형식을 변경할 수 있습니다.

더 많은 툴팁 옵션은 ApexCharts 공식 문서를 참조하시기 바랍니다. ApexCharts 공식 문서