Skip to content
Docs
Back to Components

MiniBarChart

@hua-labs/ui/data
v1.0.0

A compact bar chart component for simple data visualization. Perfect for dashboard cards and small spaces with today's highlight feature.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { MiniBarChart } from "@hua-labs/ui/data";

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

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

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

라이브 데모

기본 사용법

10개
10
Mon
20개
20
Tue
15개
15
Wed
30개
30
Thu
25개
25
Fri
40개
40
Sat
35개
35
Sun
총: 175
평균: 25
최고: 40

Without Stats

25개
25
Mon
40개
40
Tue
30개
30
Wed
55개
55
Thu
45개
45
Fri
60개
60
Sat
50개
50
Sun

색상

blue
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
purple
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
green
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
orange
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
red
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
indigo
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
pink
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun
gray
15개
15
Mon
25개
25
Tue
20개
20
Wed
35개
35
Thu
30개
30
Fri
40개
40
Sat
28개
28
Sun

Highlight Today

todayIndex=3

20개
20
Mon
35개
35
Tue
25개
25
Wed
45개
45
Thu
30개
30
Fri
40개
40
Sat
35개
35
Sun
총: 230
평균: 33
최고: 45

highlightToday=

20개
20
Mon
35개
35
Tue
25개
25
Wed
45개
45
Thu
30개
30
Fri
40개
40
Sat
35개
35
Sun
총: 230
평균: 33
최고: 45

Different Heights

height=80

15개
15
25개
25
20개
20
35개
35
30개
30

height=160 (default)

15개
15
25개
25
20개
20
35개
35
30개
30

Props

이름타입기본값설명
data*number[]-차트에 사용할 숫자 배열
labelsstring[]-각 바의 레이블
maxValuenumber-최대값 (생략 시 자동 계산)
heightnumber160차트 높이 (픽셀)
showTooltipbooleantrue호버 시 툴팁 표시 여부
showStatsbooleantrue통계(합계, 평균, 최대값) 표시 여부
color"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray""blue"바 색상 테마
highlightTodaybooleantrue오늘 항목 강조 표시 여부
todayIndexnumberdata.length - 1오늘 항목의 인덱스

코드 예시

기본 사용법

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

export function BasicMiniBarChart() {
  return (
    <MiniBarChart
      data={[10, 20, 15, 30, 25, 40, 35]}
      labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
    />
  );
}

색상 변형

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

export function MiniBarChartColors() {
  const data = [15, 25, 20, 35, 30];

  return (
    <div className="grid grid-cols-2 gap-4">
      <MiniBarChart data={data} color="blue" />
      <MiniBarChart data={data} color="purple" />
      <MiniBarChart data={data} color="green" />
      <MiniBarChart data={data} color="orange" />
    </div>
  );
}