Sparkline

Data Visualization

축 없는 초소형 추세 차트.

Usage

테이블 셀이나 KPI 카드 안에서 작은 공간으로 값의 추세만 보여 줄 때 사용한다.

import

import { Sparkline } from '@mildang/design-system/Chart';

API Reference

Sparkline Props

Prop

Type

Default

values

필수

number[]

지정 안 함

ariaLabel

string

스파크라인

className

string

지정 안 함

color

string

지정 안 함

margin

Partial<ChartMargin>

지정 안 함

showLastPoint

boolean

true

strokeWidth

number

1.5

variant

"area" | "line" | "bar"

line

예제

기본 (선)

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

// 최근 8주 주간 정답률(%) 추이
const accuracyTrend = [72, 68, 75, 80, 74, 82, 79, 86];

const SparklineDefaultExample = () => <Sparkline values={accuracyTrend} />;

export default SparklineDefaultExample;

영역

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

// 최근 8주 주간 정답률(%) 추이
const accuracyTrend = [72, 68, 75, 80, 74, 82, 79, 86];

const SparklineAreaExample = () => <Sparkline values={accuracyTrend} variant="area" />;

export default SparklineAreaExample;

막대

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

// 최근 7일 학습 시간(분)
const studyMinutes = [45, 30, 0, 60, 55, 40, 70];

const SparklineBarExample = () => <Sparkline values={studyMinutes} variant="bar" />;

export default SparklineBarExample;

색상·굵기 커스텀

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';
import { getChartColor } from '@mildang/design-system/Chart';

// 최근 8주 주간 정답률(%) 추이
const accuracyTrend = [72, 68, 75, 80, 74, 82, 79, 86];

const SparklineCustomColorExample = () => <Sparkline values={accuracyTrend} color={getChartColor(3)} strokeWidth={2.5} />;

export default SparklineCustomColorExample;

마지막 점 강조 없음

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

// 최근 8주 주간 정답률(%) 추이
const accuracyTrend = [72, 68, 75, 80, 74, 82, 79, 86];

const SparklineWithoutLastPointExample = () => <Sparkline values={accuracyTrend} showLastPoint={false} />;

export default SparklineWithoutLastPointExample;

테이블 셀 활용

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

const SparklineInTableCellExample = () => {
    const students = [
      { name: '김민준', scores: [78, 82, 80, 85, 88, 91], variant: 'line' as const },
      { name: '이서연', scores: [92, 90, 88, 85, 87, 84], variant: 'area' as const },
      { name: '박지호', scores: [60, 0, 45, 70, 65, 75], variant: 'bar' as const },
    ];
    return (
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <tbody>
          {students.map((s) => (
            <tr key={s.name}>
              <td style={{ padding: 4 }}>{s.name}</td>
              <td style={{ padding: 4, width: 120, height: 28 }}>
                <Sparkline values={s.scores} variant={s.variant} ariaLabel={`${s.name} 성적 추이`} />
              </td>
              <td style={{ padding: 4, textAlign: 'right' }}>{s.scores[s.scores.length - 1]}점</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  };

export default SparklineInTableCellExample;

빈 배열

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

const SparklineEmptyExample = () => <Sparkline values={[]} />;

export default SparklineEmptyExample;

값 1개

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

const SparklineSingleValueExample = () => <Sparkline values={[75]} />;

export default SparklineSingleValueExample;

전체 0 (평평한 데이터)

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

const SparklineAllZeroExample = () => <Sparkline values={[0, 0, 0, 0, 0]} />;

export default SparklineAllZeroExample;

반응형 (부모 크기 추종)

코드

Open in Playground

import { Sparkline } from '@mildang/design-system/Chart';

// 최근 8주 주간 정답률(%) 추이
const accuracyTrend = [72, 68, 75, 80, 74, 82, 79, 86];

const SparklineResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {([80, 200, 400] as const).map((w) => (
        <div key={w}>
          <div style={{ marginBottom: 2, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 32 }}>
            <Sparkline values={accuracyTrend} variant="area" />
          </div>
        </div>
      ))}
    </div>
  );

export default SparklineResponsiveExample;