chart
English시작하기

문서 › 차트 종류

선 차트

시간에 따른 변화. 곡선, 계단, 점, 마지막 값 강조.

type: 'line' 은 기본 차트입니다. 마우스를 올리면 세로 크로스헤어가 생기고 그 x의 모든 시리즈 값이 툴팁 하나에 나옵니다. 시리즈가 하나면 마지막 점에 값이 붙습니다(lastPoint).

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '월별 방문자',
  unit: '명',
  smooth: true,
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월'],
    series: [
      { name: '올해', data: [41200, 43800, 52100, 49800, 61200, 66400, 71800, 69500, 74300, 80100] },
      { name: '작년', data: [36500, 35200, 40100, 42800, 47900, 51300, 55100, 53800, 58200, 60400], dashed: true },
    ],
  },
});

옵션

옵션기본값설명
curve'straight''straight' | 'smooth' | 'step'. smooth 는 값보다 튀어 오르지 않는 곡선(monotone)
smoothfalsecurve: 'smooth' 와 같음. 시리즈에 주면 그 시리즈만
points'auto'점 표시. auto 는 점이 30개 이하일 때만
pointShape'circle''circle' | 'square' | 'diamond'
lastPoint선 하나면 true마지막 점을 강조
nulls'gap'빈 값: 'gap' | 'connect' | 'zero'
dataLabelsfalsetrue 또는 'end': 선 끝에만 값 (모든 점에 숫자를 붙이지 않음)

계단 선

요금제·재고처럼 값이 바뀌기 전까지 그대로인 데이터는 curve: 'step' 이 정확합니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '보유 재고',
  unit: '개',
  curve: 'step',
  points: true,
  data: {
    labels: ['월', '화', '수', '목', '금', '토', '일'],
    series: [{ name: '재고', data: [120, 120, 85, 85, 140, 132, 132] }],
  },
});