BarChart

@hua-labs/ui/data

v1.0.0

데이터 시각화를 위한 막대 차트 컴포넌트입니다. 다중 데이터 시리즈와 커스터마이징 옵션을 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { BarChart } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

주간 매출

총: 880

평균: 176

최고: 250

하이라이트 포함

분기별 실적

총: 4,800

평균: 1,200

최고: 1,500

색상 스킴

blue

총: 550

평균: 138

최고: 180

purple

총: 550

평균: 138

최고: 180

green

총: 550

평균: 138

최고: 180

orange

총: 550

평균: 138

최고: 180

변형

gradient

총: 300

평균: 100

최고: 120

default

총: 300

평균: 100

최고: 120

Props

이름	타입	기본값
`data*`	`BarChartData[]`	-
`title`	`string`	-
`height`	`number`	`200`
`showValues`	`boolean`	`true`
`showLabels`	`boolean`	`true`
`maxValue`	`number`	-
`colorScheme`	`"blue" \| "purple" \| "green" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"blue"`
`variant`	`"default" \| "gradient"`	`"gradient"`
`showGrid`	`boolean`	`true`
`showTooltip`	`boolean`	`true`

BarChartData

Props

이름	타입	기본값
`label*`	`string`	-
`value*`	`number`	-
`color`	`string`	-
`highlight`	`boolean`	`false`

코드 예시

기본 사용법

tsx

import { BarChart } from "@hua-labs/ui/data";

export function BasicBarChart() {
  return (
    <BarChart
      data={[
        { label: "Mon", value: 100 },
        { label: "Tue", value: 200 },
        { label: "Wed", value: 150 },
        { label: "Thu", value: 250 },
        { label: "Fri", value: 180 },
      ]}
      title="Weekly Sales"
    />
  );
}

하이라이트 포함

tsx

import { BarChart } from "@hua-labs/ui/data";

export function BarChartWithHighlight() {
  return (
    <BarChart
      data={[
        { label: "Q1", value: 1000 },
        { label: "Q2", value: 1200 },
        { label: "Q3", value: 1500, highlight: true },
        { label: "Q4", value: 1100 },
      ]}
      title="Quarterly Performance"
      colorScheme="green"
      showTooltip
    />
  );
}

TrendChartPro MiniBarChartPro