[javascript] ApexCharts에서 범례 설정하기

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하여 다양한 형식의 차트를 생성하고, 데이터를 시각적으로 표현할 수 있습니다. 이번에는 ApexCharts에서 범례를 설정하는 방법에 대해 알아보겠습니다.

차트에 범례 추가하기

ApexCharts에서 차트에 범례를 추가하는 방법은 매우 간단합니다. ApexCharts의 “options” 객체에 “legend” 속성을 추가하면 됩니다. “legend” 속성에는 다양한 설정 값을 사용할 수 있습니다.

var options = {
  ... // 다른 설정들
  legend: {
    show: true, // 범례를 표시할지 여부
    position: 'top', // 범례의 위치 (top, right, bottom, left 중 선택)
    horizontalAlign: 'center', // 범례의 수평 정렬 (left, center, right 중 선택)
    fontSize: '14px', // 범례의 글꼴 크기
    fontFamily: 'Arial, sans-serif', // 범례의 글꼴 패밀리
    markers: {
      width: 12,
      height: 12,
      strokeWidth: 0, // 범례 아이콘의 선 굵기
      strokeColor: '#fff', // 범례 아이콘의 선 색상
      fillColors: ['#ff0000', '#00ff00', '#0000ff'], // 범례 아이콘의 채움 색상
      radius: 6, // 범례 아이콘의 반지름
      onClick: undefined, // 범례 아이콘 클릭 시 호출될 함수
      offsetX: 0, // 범례 아이콘의 가로 위치 조절
      offsetY: 0 // 범례 아이콘의 세로 위치 조절
    },
    itemMargin: {
      horizontal: 10, // 범례 항목들 간의 가로 간격
      vertical: 10 // 범례 항목들 간의 세로 간격
    }
  },
  ...
};

위의 예시 코드에서는 legend.show 속성을 true로 설정하여 범례를 표시하도록 하였고, legend.position 속성을 top으로 설정하여 범례를 차트의 위쪽에 배치하였습니다.

범례의 다른 설정 값들은 본인의 요구에 맞게 조정하면 됩니다. 예를 들어 legend.fontSize이나 legend.fontFamily 속성을 변경하여 범례의 글꼴 크기와 글꼴 패밀리를 조정할 수 있습니다.

차트에 범례 추가하기

참고 자료