[javascript] ApexCharts에서 차트에 테마별 컬러 설정하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 인기 있는 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성할 수 있으며, 각 차트의 테마 및 컬러도 설정할 수 있습니다. 이번 글에서는 ApexCharts에서 차트에 테마별 컬러를 설정하는 방법을 알아보겠습니다.

ApexCharts 테마

ApexCharts는 여러 가지 테마를 제공합니다. 각 테마는 사전에 정의된 컬러 스킴을 가지고 있어서 사용자가 원하는 테마를 선택하여 차트의 색상을 지정할 수 있습니다. 몇 가지 기본적인 테마는 다음과 같습니다.

light : 밝은 배경에 어두운 텍스트를 사용하는 테마
dark : 어두운 배경에 밝은 텍스트를 사용하는 테마
gradient : 그라데이션 효과를 사용하는 테마

컬러 설정하기

ApexCharts에서 차트의 컬러를 설정하려면 colors 속성을 사용해야 합니다. 이 속성에는 배열 형태로 사용하고자 하는 컬러를 나열합니다. 각각의 컬러는 16진수 형식으로 지정되며, 테마에 따라 다른 컬러를 지정할 수 있습니다.

아래는 light 테마를 사용하고 차트의 색상을 설정하는 예제입니다.

var options = {
  chart: {
    type: 'bar',
    height: 400,
  },
  series: [{
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  colors: ['#FF4560', '#008FFB', '#00E396', '#FEB019', '#FF4560', '#008FFB', '#00E396', '#FEB019', '#FF4560'],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
}

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

위의 예제에서 colors 속성에는 light 테마에 맞춰서 9가지 컬러를 지정했습니다. 이렇게 하면 차트의 각 요소에 순서대로 컬러가 할당됩니다.

차트에 테마 및 컬러 설정하기

ApexCharts에서 차트에 테마 및 컬러를 설정하는 방법을 알아보았습니다. 테마는 theme 속성을 사용하여 설정하고, 컬러는 colors 속성을 사용하여 설정합니다. 원하는 테마와 컬러를 설정하여 자신만의 멋진 차트를 만들어보세요!

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