RangeAreaChart

Data Visualization

visx 기반 범위(밴드) 영역 차트.

Usage

예측 구간이나 최소·최대처럼 두 경계 사이의 범위를 시간축에서 표시할 때 사용한다.

import

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

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

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

API Reference

RangeAreaChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

y0Key

필수

string

지정 안 함

y1Key

필수

string

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

curve

"step" | "linear" | "monotone"

linear

fillOpacity

number

0.3

labels

RangeAreaChartLabels

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

midKey

string

지정 안 함

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

xAxisProps

RangeAreaChartAxisProps

지정 안 함

yAxisProps

RangeAreaChartAxisProps

지정 안 함

예제

기본 (최소~최대 밴드)

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartDefaultExample = () => (
    <RangeAreaChart data={monthlyScoreRange} xKey="month" y0Key="min" y1Key="max" />
  );

export default RangeAreaChartDefaultExample;

중앙선 포함

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartWithMidLineExample = () => (
    <RangeAreaChart
      data={monthlyScoreRange}
      xKey="month"
      y0Key="min"
      y1Key="max"
      midKey="avg"
      labels={{ y0: '최저 점수', y1: '최고 점수', mid: '평균 점수', band: '점수 범위' }}
      showLegend
    />
  );

export default RangeAreaChartWithMidLineExample;

곡선 보간 (monotone)

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartMonotoneCurveExample = () => (
    <RangeAreaChart
      data={monthlyScoreRange}
      xKey="month"
      y0Key="min"
      y1Key="max"
      midKey="avg"
      curve="monotone"
      labels={{ y0: '최저 점수', y1: '최고 점수', mid: '평균 점수' }}
    />
  );

export default RangeAreaChartMonotoneCurveExample;

Hover Tooltip

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartHoverTooltipExample = () => (
    <RangeAreaChart
      data={monthlyScoreRange}
      xKey="month"
      y0Key="min"
      y1Key="max"
      midKey="avg"
      labels={{ y0: '최저 점수', y1: '최고 점수', mid: '평균 점수' }}
      showTooltip
    />
  );

export default RangeAreaChartHoverTooltipExample;

커스텀 색상 · 투명도

코드

Open in Playground

import { RangeAreaChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

// 요일별 학생 학습 시간 분포 (분)
const dailyStudyRange = [
  { day: '월', shortest: 20, longest: 95 },
  { day: '화', shortest: 25, longest: 110 },
  { day: '수', shortest: 15, longest: 88 },
  { day: '목', shortest: 30, longest: 120 },
  { day: '금', shortest: 22, longest: 105 },
  { day: '토', shortest: 40, longest: 150 },
  { day: '일', shortest: 35, longest: 140 },
];

const RangeAreaChartCustomColorExample = () => (
    <RangeAreaChart
      data={dailyStudyRange}
      xKey="day"
      y0Key="shortest"
      y1Key="longest"
      color={token('colors.blue.light.400')}
      fillOpacity={0.5}
      labels={{ y0: '최소 학습 시간', y1: '최대 학습 시간', band: '학습 시간 범위(분)' }}
      showLegend
    />
  );

export default RangeAreaChartCustomColorExample;

빈 데이터

코드

Open in Playground

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

const RangeAreaChartEmptyExample = () => <RangeAreaChart data={[]} xKey="month" y0Key="min" y1Key="max" />;

export default RangeAreaChartEmptyExample;

데이터 1개

코드

Open in Playground

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

const RangeAreaChartSingleDatumExample = () => (
    <RangeAreaChart
      data={[{ month: '3월', min: 52, max: 88, avg: 71 }]}
      xKey="month"
      y0Key="min"
      y1Key="max"
      midKey="avg"
      showTooltip
    />
  );

export default RangeAreaChartSingleDatumExample;

전체 0 (플랫 밴드)

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartFlatZeroBandExample = () => (
    <RangeAreaChart
      data={monthlyScoreRange.map((d) => ({ ...d, min: 0, max: 0, avg: 0 }))}
      xKey="month"
      y0Key="min"
      y1Key="max"
      midKey="avg"
    />
  );

export default RangeAreaChartFlatZeroBandExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ width: w, height: 240 }}>
            <RangeAreaChart
              data={monthlyScoreRange}
              xKey="month"
              y0Key="min"
              y1Key="max"
              midKey="avg"
              labels={{ y0: '최저 점수', y1: '최고 점수', mid: '평균 점수' }}
              showLegend
            />
          </div>
        </div>
      ))}
    </div>
  );

export default RangeAreaChartResponsiveExample;

Compound 패턴 — 축 커스텀

코드

Open in Playground

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

// 월별 반 전체 시험 점수 분포 (최저~최고 + 평균)
const monthlyScoreRange = [
  { month: '3월', min: 52, max: 88, avg: 71 },
  { month: '4월', min: 55, max: 90, avg: 73 },
  { month: '5월', min: 48, max: 92, avg: 70 },
  { month: '6월', min: 58, max: 94, avg: 76 },
  { month: '7월', min: 61, max: 95, avg: 79 },
  { month: '8월', min: 63, max: 97, avg: 82 },
];

const RangeAreaChartCompoundCustomExample = () => (
    <RangeAreaChart data={monthlyScoreRange} xKey="month" y0Key="min" y1Key="max" midKey="avg">
      <RangeAreaChart.Grid />
      <RangeAreaChart.XAxis hideTicks hideAxisLine />
      <RangeAreaChart.YAxis hideTicks hideAxisLine numTicks={4} />
      <RangeAreaChart.Area />
    </RangeAreaChart>
  );

export default RangeAreaChartCompoundCustomExample;