LollipopChart

Data Visualization

visx 기반 롤리팝 차트.

Usage

막대보다 가볍게 카테고리별 수치와 순서를 점·줄기로 비교할 때 사용한다.

import

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

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

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

API Reference

LollipopChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

yKey

필수

string

지정 안 함

className

string

지정 안 함

color

string

지정 안 함

label

string

지정 안 함

layout

"horizontal" | "vertical"

vertical

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

pointRadius

number

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showValueText

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

예제

기본

코드

Open in Playground

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

const unitData = [
  { unit: '1단원', correctRate: 92 },
  { unit: '2단원', correctRate: 85 },
  { unit: '3단원', correctRate: 78 },
  { unit: '4단원', correctRate: 88 },
  { unit: '5단원', correctRate: 64 },
  { unit: '6단원', correctRate: 71 },
];

const LollipopChartDefaultExample = () => <LollipopChart data={unitData} xKey="unit" yKey="correctRate" label="정답률" showLegend />;

export default LollipopChartDefaultExample;

가로 레이아웃

코드

Open in Playground

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

const LollipopChartHorizontalExample = () => (
    <LollipopChart
      data={[
        { student: '김민준', studyMinutes: 342 },
        { student: '이서연', studyMinutes: 289 },
        { student: '박지호', studyMinutes: 415 },
        { student: '최수아', studyMinutes: 198 },
        { student: '정하윤', studyMinutes: 367 },
      ]}
      xKey="student"
      yKey="studyMinutes"
      label="학습 시간(분)"
      layout="horizontal"
    />
  );

export default LollipopChartHorizontalExample;

Hover Tooltip

코드

Open in Playground

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

const unitData = [
  { unit: '1단원', correctRate: 92 },
  { unit: '2단원', correctRate: 85 },
  { unit: '3단원', correctRate: 78 },
  { unit: '4단원', correctRate: 88 },
  { unit: '5단원', correctRate: 64 },
  { unit: '6단원', correctRate: 71 },
];

const LollipopChartHoverTooltipExample = () => (
    <LollipopChart data={unitData} xKey="unit" yKey="correctRate" label="정답률" showTooltip />
  );

export default LollipopChartHoverTooltipExample;

값 라벨

코드

Open in Playground

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

const unitData = [
  { unit: '1단원', correctRate: 92 },
  { unit: '2단원', correctRate: 85 },
  { unit: '3단원', correctRate: 78 },
  { unit: '4단원', correctRate: 88 },
  { unit: '5단원', correctRate: 64 },
  { unit: '6단원', correctRate: 71 },
];

const LollipopChartWithValueTextExample = () => <LollipopChart data={unitData} xKey="unit" yKey="correctRate" showValueText />;

export default LollipopChartWithValueTextExample;

커스텀 색·포인트 크기

코드

Open in Playground

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

const unitData = [
  { unit: '1단원', correctRate: 92 },
  { unit: '2단원', correctRate: 85 },
  { unit: '3단원', correctRate: 78 },
  { unit: '4단원', correctRate: 88 },
  { unit: '5단원', correctRate: 64 },
  { unit: '6단원', correctRate: 71 },
];

const LollipopChartCustomColorAndRadiusExample = () => (
    <LollipopChart
      data={unitData}
      xKey="unit"
      yKey="correctRate"
      label="정답률"
      color={token('colors.mildangPT.light.400')}
      pointRadius={10}
      showValueText
    />
  );

export default LollipopChartCustomColorAndRadiusExample;

빈 데이터

코드

Open in Playground

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

const LollipopChartEmptyExample = () => <LollipopChart data={[]} xKey="unit" yKey="correctRate" />;

export default LollipopChartEmptyExample;

데이터 1개

코드

Open in Playground

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

const LollipopChartSingleDatumExample = () => (
    <LollipopChart data={[{ unit: '1단원', correctRate: 92 }]} xKey="unit" yKey="correctRate" showValueText />
  );

export default LollipopChartSingleDatumExample;

값이 0인 경우

코드

Open in Playground

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

const LollipopChartWithZeroValuesExample = () => (
    <LollipopChart
      data={[
        { unit: '1단원', correctRate: 92 },
        { unit: '2단원', correctRate: 0 },
        { unit: '3단원', correctRate: 78 },
        { unit: '4단원', correctRate: 0 },
      ]}
      xKey="unit"
      yKey="correctRate"
      label="정답률"
      showValueText
      showTooltip
    />
  );

export default LollipopChartWithZeroValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

const unitData = [
  { unit: '1단원', correctRate: 92 },
  { unit: '2단원', correctRate: 85 },
  { unit: '3단원', correctRate: 78 },
  { unit: '4단원', correctRate: 88 },
  { unit: '5단원', correctRate: 64 },
  { unit: '6단원', correctRate: 71 },
];

const LollipopChartResponsiveExample = () => (
    <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={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <LollipopChart data={unitData} xKey="unit" yKey="correctRate" label="정답률" showLegend />
          </div>
        </div>
      ))}
    </div>
  );

export default LollipopChartResponsiveExample;