DualAxisBarLineChart

Data Visualization

서로 다른 축을 쓰는 막대·선 조합 차트.

Usage

단위가 다른 두 지표를 막대와 선, 좌우 축으로 함께 비교할 때 사용한다.

import

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

API Reference

DualAxisBarLineChart Props

Prop

Type

Default

barKey

필수

string

지정 안 함

data

필수

TDatum[]

지정 안 함

lineKey

필수

string

지정 안 함

xKey

필수

string

지정 안 함

className

string

지정 안 함

colors

[string, string]

지정 안 함

labels

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

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

showDots

boolean

true

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

예제

Default

코드

Open in Playground

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

const monthlyMemberships = [
  { month: '3월', signupCount: 120, cumulativeMembershipCount: 8200 },
  { month: '4월', signupCount: 180, cumulativeMembershipCount: 8380 },
  { month: '5월', signupCount: 240, cumulativeMembershipCount: 8620 },
  { month: '6월', signupCount: 310, cumulativeMembershipCount: 8930 },
  { month: '7월', signupCount: 420, cumulativeMembershipCount: 9350 },
  { month: '8월', signupCount: 530, cumulativeMembershipCount: 9880 },
];

const DualAxisBarLineChartDefaultExample = () => (
    <DualAxisBarLineChart
      data={monthlyMemberships}
      xKey="month"
      barKey="signupCount"
      lineKey="cumulativeMembershipCount"
      labels={{ signupCount: '월별 가입', cumulativeMembershipCount: '누적 회원' }}
      showLegend
      showTooltip
    />
  );

export default DualAxisBarLineChartDefaultExample;