문서 › 차트 종류

스파크라인·KPI 카드

큰 숫자, 증감 배지, 작은 추세선을 한 카드에.

기본 모양(skin: 'card')은 카드입니다. 위에서부터 작은 머리글(eyebrow), 제목, 부제, 큰 숫자(value), 오른쪽 위 증감 배지(delta), 차트, 아래 주석(footnote) 순서입니다. 한국 대시보드의 KPI 카드 순서 그대로입니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'area',
  eyebrow: 'REVENUE',
  title: '이번 달 매출',
  subtitle: '10월 1일~21일',
  value: 48250000,
  unit: '원',
  delta: 18.2,
  deltaLabel: '전월 대비',
  footnote: '기준: 2026.10.21 09:00',
  height: 140,
  data: {
    labels: ['10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'],
    series: [{ name: '매출', data: [2010000, 2240000, 2180000, 2650000, 2420000, 2890000, 3120000] }],
  },
});

증감 배지

옵션	설명
`delta`	숫자면 퍼센트(`18.2` → +18.2%), 문자열이면 그대로
`deltaUpIsGood`	기본 true(오르면 초록). 비용·오류처럼 줄어야 좋은 지표는 `false`
`deltaColors`	`'semantic'`(좋음 초록·나쁨 빨강, 기본) 또는 `'korea'`(오르면 빨강 ▲·내리면 파랑 ▼, 증권 앱 방식)
`deltaLabel`	배지 옆 작은 글, 예: `'전월 대비'`

스파크라인

skin: 'sparkline' 은 축·격자·범례 없이 선만 그립니다. 표 안이나 카드 구석에 넣는 작은 추세선입니다. 높이는 폭에 맞춰 32–80px 사이로 정해집니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  skin: 'sparkline',
  data: { series: [{ name: '방문자', data: [12, 15, 14, 18, 17, 21, 19, 24, 26, 25, 29] }] },
});

카드 테두리 없이 차트만 필요하면 skin: 'plain' 입니다.