Skip to content
Docs
Back to Components

MiniBarChart

@hua-labs/ui/advanced/dashboard
v1.0.0

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

Without Stats

blue
purple
green
orange
red
indigo
pink
gray

Highlight Today

todayIndex=3

highlightToday=

Different Heights

height=80

height=160 (default)

Props

data*number[]-Array of numeric values for the chart
labelsstring[]-Labels for each bar
maxValuenumber-Maximum value (auto-calculated if omitted)
heightnumber160Chart height in pixels
showTooltipbooleantrueWhether to show tooltips on hover
showStatsbooleantrueWhether to show statistics (total, avg, max)
color"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray""blue"Bar color theme
highlightTodaybooleantrueWhether to highlight today's item
todayIndexnumberdata.length - 1Index of today's item

docs:common.basicUsage

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

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

Color Variants

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

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>
  );
}
BarChartProQuickActionCard