테마와 색

theme 의 기본값 'auto' 는 페이지를 따라갑니다. 조상 요소의 data-theme="dark|light", <html class="dark">, 그다음 운영체제 설정 순서로 보고, 바뀌면 다시 그립니다. 이 사이트의 오른쪽 위 테마 단추를 눌러 보세요.

chart.setTheme('dark');   // 'light' | 'dark' | 'auto'

팔레트

기본 팔레트는 색약 사용자도 인접한 색을 구분할 수 있게 검증한 8색입니다(파랑·주황·청록·노랑·분홍·초록·보라·빨강). 9번째 시리즈부터는 같은 색을 반복하지 않고 회색 계열을 씁니다. 같은 색이 다른 뜻으로 두 번 나오지 않게 하기 위해서입니다.

createChart('#chart', {
  type: 'bar',
  title: '상품군별 매출',
  palette: 'mono',
  colors: ['#6250d6'],
  stacked: true,
  data: {
    labels: ['1분기', '2분기', '3분기', '4분기'],
    series: [
      { name: '의류', data: [42, 48, 51, 63] },
      { name: '잡화', data: [28, 31, 30, 38] },
      { name: '식품', data: [18, 22, 25, 24] },
    ],
  },
});

시리즈 색 정하기

colors: ['#3182f6', '#eb6834'] 는 시리즈 순서대로 색을 고정합니다. 시리즈 하나만 바꾸려면 그 시리즈에 color 를 줍니다. 색은 순위가 아니라 시리즈에 붙으므로, 데이터가 바뀌어도 "매출"은 늘 같은 색입니다.

CSS 변수로 덮어쓰기

차트나 그 조상 요소에 --c82-* 변수를 주면 사이트 색에 맞출 수 있습니다. 색은 SVG 속성에 직접 풀어 쓰므로 PNG·SVG로 내보내도 화면과 같습니다.

/* 밝은 테마 */
.my-dashboard {
  --c82-bg: #fffdf8;
  --c82-ink: #1c1917;
  --c82-grid: #ece7df;
  --c82-s1: #e8590c;      /* 첫 번째 시리즈 */
  --c82-font: 'Pretendard', sans-serif;
}
/* 어두운 테마일 때만 */
.my-dashboard .c82[data-theme='dark'] {
  --c82-bg: #1c1917;
  --c82-ink: #f5f5f4;
  --c82-grid: #2e2a27;
}