Featuring Design System

LineChart

시계열 추이를 선으로 시각화하는 차트 컨테이너.

개요

LineChart는 recharts의 LineChart를 얇게 래핑한 컨테이너입니다. accessibilityLayer 기본 활성, data 배열의 fill/stroke $토큰 자동 해석을 제공합니다.

  • Line 시리즈와 함께 사용 — stroke, dot, activeDot, label 모두 $ 토큰 지원
  • type — monotone (부드러운 곡선, 권장) 또는 linear (직선)
  • Brush 조합 — 하단에 구간 선택 UI 추가 가능

언제 사용하나요

  • 시간에 따른 추이 — 일별 조회수, 월별 방문자
  • 여러 지표 비교 — 동일 스케일의 서로 다른 측정치
  • 연속적인 변화 시각화 — 트렌드의 방향성과 변동폭 강조

언제 사용하면 안 되나요

  • 이산적 카테고리 비교 → BarChart
  • 누적 구성비 추이 → AreaChart (stackId)
  • 단일 시점 스냅샷 → 숫자 직접 표기

접근성

  • accessibilityLayer 기본 활성 — 방향키로 데이터 포인트 이동.
  • 각 라인에 구분 가능한 색상 또는 strokeDasharray를 조합해 색맹 사용자를 위한 이중 신호 제공을 권장합니다.

Usage

기본 사용법

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
  { date: '04/05', views: 3890 },
  { date: '04/06', views: 6200 },
  { date: '04/07', views: 5490 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

다중 시리즈

() => {
const data = [
  { date: '04/01', views: 4200, likes: 1240 },
  { date: '04/02', views: 3800, likes: 980 },
  { date: '04/03', views: 5100, likes: 1650 },
  { date: '04/04', views: 4780, likes: 1390 },
  { date: '04/05', views: 3890, likes: 870 },
  { date: '04/06', views: 6200, likes: 2100 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} />
      <Line type="monotone" dataKey="likes" stroke="$teal-50" strokeWidth={2} />
      <ChartTooltip />
      <ChartLegend />
    </LineChart>
  </ResponsiveContainer>
);
}

점선 / 점 제거

strokeDasharray로 점선을, dot={false}로 점을 제거합니다.

() => {
const data = [
  { date: '04/01', views: 4200, likes: 1240 },
  { date: '04/02', views: 3800, likes: 980 },
  { date: '04/03', views: 5100, likes: 1650 },
  { date: '04/04', views: 4780, likes: 1390 },
  { date: '04/05', views: 3890, likes: 870 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line
        type="monotone"
        dataKey="views"
        stroke="$primary-50"
        strokeWidth={2}
        strokeDasharray="5 5"
        dot={false}
      />
      <Line
        type="monotone"
        dataKey="likes"
        stroke="$gray-50"
        strokeWidth={2}
        dot={false}
      />
      <ChartTooltip />
      <ChartLegend />
    </LineChart>
  </ResponsiveContainer>
);
}

곡선 타입

type="monotone" (부드러운 곡선, 단조성 유지)과 type="linear" (직선 연결) 중 선택합니다. 기본값은 recharts와 동일하게 linear입니다.

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
  { date: '04/05', views: 3890 },
  { date: '04/06', views: 6200 },
];
return (
  <VStack $css={{ gap: '$spacing-500' }}>
    <ResponsiveContainer width="100%" height={180}>
      <LineChart data={data}>
        <XAxis dataKey="date" />
        <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
    <ResponsiveContainer width="100%" height={180}>
      <LineChart data={data}>
        <XAxis dataKey="date" />
        <Line type="linear" dataKey="views" stroke="$teal-50" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  </VStack>
);
}

기준선 (ReferenceLine)

ReferenceLine으로 목표값이나 임계값을 표시합니다.

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
  { date: '04/05', views: 3890 },
  { date: '04/06', views: 6200 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} />
      <ReferenceLine
        y={5000}
        stroke="$gray-50"
        label={{ value: '목표 5,000', position: 'insideTopRight' }}
      />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

Brush (구간 선택)

하단 Brush로 표시 구간을 드래그 선택합니다.

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
  { date: '04/05', views: 3890 },
  { date: '04/06', views: 6200 },
  { date: '04/07', views: 5490 },
  { date: '04/08', views: 4700 },
  { date: '04/09', views: 3200 },
  { date: '04/10', views: 5800 },
];
return (
  <ResponsiveContainer width="100%" height={320}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} dot={false} />
      <ChartTooltip />
      <Brush dataKey="date" height={24} stroke="$primary-50" />
    </LineChart>
  </ResponsiveContainer>
);
}

Slot 토큰 — dot / activeDot

dot, activeDot은 오브젝트 형태일 때 $ 토큰 해석. label 오브젝트(미예시)도 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, 소비자 명시값이 우선합니다.

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
  { date: '04/05', views: 3890 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" />
      <YAxis />
      <Line
        type="monotone"
        dataKey="views"
        stroke="$primary-50"
        strokeWidth={2}
        dot={{ r: 4, fill: '$primary-50', stroke: '$background-1', strokeWidth: 2 }}
        activeDot={{ r: 6, fill: '$primary-30', stroke: '$background-1', strokeWidth: 2 }}
      />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

Tick 타이포그래피

XAxis / YAxis의 tick에 typo, fill 토큰을 지정해 축 레이블을 커스터마이즈할 수 있습니다.

() => {
const data = [
  { date: '04/01', views: 4200 },
  { date: '04/02', views: 3800 },
  { date: '04/03', views: 5100 },
  { date: '04/04', views: 4780 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <LineChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="date" tick={{ typo: '$body-1', fill: '$text-1' }} />
      <YAxis tick={{ typo: '$body-1', fill: '$text-1' }} />
      <Line type="monotone" dataKey="views" stroke="$primary-50" strokeWidth={2} />
      <ChartTooltip />
    </LineChart>
  </ResponsiveContainer>
);
}

Props

recharts LineChart를 래핑합니다. 여기에 명시되지 않은 props는 recharts LineChart API를 참고하세요.

LineChart

extends recharts LineChart

Prop

Type

Line

extends recharts Line

Prop

Type

BarChart

카테고리별 수치를 막대로 시각화하는 차트 컨테이너.

AreaChart

추이와 영역 크기를 함께 강조하는 차트 컨테이너.

On this page

개요언제 사용하나요언제 사용하면 안 되나요접근성Usage기본 사용법다중 시리즈점선 / 점 제거곡선 타입기준선 (ReferenceLine)Brush (구간 선택)Slot 토큰 — dot / activeDotTick 타이포그래피PropsLineChartLine