ApexCharts는 매우 강력하고 유연한 차트 라이브러리입니다. 여러 종류의 차트를 생성하고 사용자 지정할 수 있습니다. 이 중에서 데이터 라벨의 밝기를 설정하는 방법에 대해 알아보겠습니다.

데이터 라벨 밝기는 무엇인가요?

데이터 라벨은 차트의 각 데이터 포인트에서 표시되는 값입니다. 밝기란 그 데이터 라벨이 얼마나 밝게 표시되는지를 나타냅니다. 밝기가 높을수록 텍스트가 더 선명하게 표시되며, 낮을수록 텍스트가 흐릿하게 표시됩니다.

차트에 데이터 라벨 밝기 설정하는 방법

ApexCharts에서는 options 객체를 사용하여 데이터 라벨의 밝기를 설정할 수 있습니다. 이를 통해 차트의 텍스트가 원하는 대로 표시될 수 있습니다.

var chartOptions = {
  series: [...],  // 차트 데이터
  options: {
    dataLabels: {
      style: {
        colors: ['#000000'],  // 텍스트 색상
        fontSize: '14px',  // 폰트 크기
        fontWeight: 'bold',  // 폰트 굵기
        opacity: 1,  // 투명도
      }
    }
  }
}

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

위의 예시 코드에서 style 객체 내의 속성들을 조정하여 데이터 라벨의 밝기를 조절할 수 있습니다. 텍스트 색상을 설정하려면 colors 배열에 원하는 색상을 추가하면 됩니다. 폰트 크기와 굵기를 설정하려면 fontSize와 fontWeight를 수정하면 됩니다. 마지막으로, 투명도를 매개변수 opacity로 조정할 수 있습니다.

참고 자료

• ApexCharts 공식 문서