ApexCharts는 JavaScript를 사용하여 인터랙티브한 차트를 생성하는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 만들 수 있으며, 데이터 포인트에 마커를 추가하여 시각적인 강조를 줄 수도 있습니다.

데이터 포인트에 마커 추가하기

1. ApexCharts를 HTML 문서에 포함합니다. 다음과 같이 스크립트 태그를 사용하여 ApexCharts 라이브러리를 가져옵니다.

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.26.3/dist/apexcharts.min.js"></script>

1. 차트를 생성하고 데이터를 정의합니다. 여기에서는 간단한 선 그래프를 예로 들겠습니다.

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  markers: {
    size: 6,
    colors: ['#FFA41B'],
    strokeColors: '#fff',
    strokeWidth: 2,
    hover: {
      size: 8,
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

1. options 객체에서 markers 속성을 사용하여 마커 스타일과 동작을 정의합니다. size 속성은 마커의 크기를 설정하고, colors 속성은 마커의 색상을 설정합니다. strokeColors와 strokeWidth 속성은 마커의 외곽선 색상과 너비를 설정합니다. hover 객체를 사용하여 마커에 마우스를 올렸을 때의 동작을 설정할 수도 있습니다.

2. chart 객체가 생성된 후 render 메서드를 호출하여 차트를 렌더링합니다. 예제 코드에서는 chart 객체를 #chart라는 ID를 가진 HTML 요소에 렌더링하도록 설정하였습니다. 이 요소는 미리 HTML 문서에 추가되어 있어야 합니다.

마무리

ApexCharts를 사용하면 데이터 포인트에 마커를 추가하여 차트를 더욱 효과적으로 표현할 수 있습니다. 위에서 설명한 방법을 활용하여 마커를 사용한 차트를 만들어 보세요.

더 자세한 정보는 ApexCharts 공식 문서를 참조하시기 바랍니다.