LineChart

Data Visualization

visx 기반 선 차트.

Usage

시간이나 순서에 따른 여러 수치 시리즈의 추세를 선으로 비교할 때 사용한다.

import

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

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

LineChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

yKeys

필수

(keyof TDatum & string)[]

지정 안 함

area

boolean

false

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

curve

"step" | "linear" | "monotone"

linear

labels

Partial<Record<keyof TDatum & string, string>>

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

showDots

boolean

false

showGrid

boolean

true

showLegend

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

예제

보간 방식 비교

curve 로 점 사이를 잇는 방식을 고른다 — 꺾은선·부드러운 곡선·계단형이 같은 데이터를 다르게 보이게 한다.

코드

'use client';

import { LineChart } from '@mildang/design-system/Chart';
import { Text } from '@mildang/design-system/Text';
import { HStack, VStack } from '@mildang/styled-system/jsx';
import { css } from '@mildang/styled-system/css';

/**
 * `curve` 로 점 사이를 잇는 보간 방식을 고른다. linear=꺾은선, monotone=값이 튀지 않는
 * 부드러운 곡선, step=계단형. 같은 데이터로 인상이 어떻게 달라지는지 비교한다.
 */
const data = [
  { day: '월', temp: 18 },
  { day: '화', temp: 22 },
  { day: '수', temp: 19 },
  { day: '목', temp: 26 },
  { day: '금', temp: 24 },
];

const curves = [
  { curve: 'linear', label: 'linear — 꺾은선' },
  { curve: 'monotone', label: 'monotone — 부드러운 곡선' },
  { curve: 'step', label: 'step — 계단형' },
] as const;

const frame = css({ width: '100%', height: '[180px]' });

export default function LineChartCurvesExample() {
  return (
    <HStack gap="6" alignItems="flex-start" flexWrap="wrap">
      {curves.map(({ curve, label }) => (
        <VStack key={curve} gap="2" alignItems="stretch" flex="1" minWidth="[180px]">
          <Text variant="caption-md" color="neutral.text.low">
            {label}
          </Text>
          <div className={frame}>
            <LineChart data={data} xKey="day" yKeys={['temp']} curve={curve} showDots />
          </div>
        </VStack>
      ))}
    </HStack>
  );
}

단일 시리즈

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartSingleExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue']}
    />
  );

export default LineChartSingleExample;

다중 시리즈

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartMultiSeriesExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue', 'cost']}
      labels={{ revenue: '매출', cost: '비용' }}
      showLegend
    />
  );

export default LineChartMultiSeriesExample;

영역 채우기

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartWithAreaExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue', 'cost']}
      area
      labels={{ revenue: '매출', cost: '비용' }}
      showLegend
    />
  );

export default LineChartWithAreaExample;

데이터 포인트 마커

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartWithDotsExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue']}
      showDots
    />
  );

export default LineChartWithDotsExample;

곡선 보간 (monotone)

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartMonotoneCurveExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue']}
      curve="monotone"
      area
    />
  );

export default LineChartMonotoneCurveExample;

스텝 보간

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartStepCurveExample = () => (
    <LineChart
      data={salesData}
      xKey="month"
      yKeys={['revenue']}
      curve="step"
    />
  );

export default LineChartStepCurveExample;

Compound 패턴

코드

Open in Playground

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

const salesData = [
  { month: '1월', revenue: 4200, cost: 2800 },
  { month: '2월', revenue: 3800, cost: 2500 },
  { month: '3월', revenue: 5100, cost: 3200 },
  { month: '4월', revenue: 4600, cost: 3000 },
  { month: '5월', revenue: 5800, cost: 3500 },
  { month: '6월', revenue: 6200, cost: 3800 },
];

const LineChartCompoundUsageExample = () => (
    <LineChart data={salesData} xKey="month" yKeys={['revenue', 'cost']}>
      <LineChart.Grid />
      <LineChart.XAxis />
      <LineChart.Lines />
    </LineChart>
  );

export default LineChartCompoundUsageExample;