[javascript] ApexCharts에서 테마 설정하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트와 그래프를 만들 수 있습니다. 이 라이브러리에서는 다양한 테마를 사용할 수 있어, 차트의 디자인과 색상을 쉽게 변경할 수 있습니다.

테마 설정 방법

ApexCharts에서 테마를 설정하기 위해서는 차트 객체를 생성할 때 theme 속성을 사용합니다. 아래는 간단한 예제 코드입니다.

var options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  theme: 'dark'
}

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

위의 예제에서 theme 속성을 'dark'로 설정하였습니다. dark 테마는 배경이 어두운 색상으로 설정되고, 차트 요소들의 색상도 조화롭게 변경됩니다.

사용 가능한 테마 종류

ApexCharts에서 사용 가능한 테마의 종류는 다양합니다. 아래는 일부 테마의 예시입니다.

light: 기본 테마로, 밝은 배경과 색상을 가지고 있습니다.
dark: 어두운 배경과 강조된 색상을 가지고 있습니다.
gradient: 그라데이션 효과를 가진 테마로, 차트를 더욱 동적으로 표현할 수 있습니다.
spectrum: 다양한 색상을 사용한 테마로, 차트를 다채롭게 표현할 수 있습니다.

테마 설정은 theme 속성을 사용하여 간단히 변경할 수 있으며, 필요에 따라 사용자 정의 테마도 만들 수 있습니다.

테마 설정 방법

사용 가능한 테마 종류

참고 자료