BarChart

v1.0.0

bash

npm install @hua-labs/hua

tsx

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

총: 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[]`	-	docs:components.barChart.props.data
`title`	`string`	-	docs:components.barChart.props.title
`height`	`number`	`200`	docs:components.barChart.props.height
`showValues`	`boolean`	`true`	docs:components.barChart.props.showValues
`showLabels`	`boolean`	`true`	docs:components.barChart.props.showLabels
`maxValue`	`number`	-	docs:components.barChart.props.maxValue
`colorScheme`	`"blue" \| "purple" \| "green" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"blue"`	docs:components.barChart.props.colorScheme
`variant`	`"default" \| "gradient"`	`"gradient"`	docs:components.barChart.props.variant
`showGrid`	`boolean`	`true`	docs:components.barChart.props.showGrid
`showTooltip`	`boolean`	`true`	docs:components.barChart.props.showTooltip

BarChartData


`label*`	`string`	-	docs:components.barChart.dataProps.label
`value*`	`number`	-	docs:components.barChart.dataProps.value
`color`	`string`	-	docs:components.barChart.dataProps.color
`highlight`	`boolean`	`false`	docs:components.barChart.dataProps.highlight

docs:common.basicUsage

tsx

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

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"
    />
  );
}

docs:components.barChart.demo.withHighlight

tsx

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

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