# Bar Chart

Animated, grouped, stacked, percent, and zoomable WebGPU column charts powered by ChartGPU.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview title="Basic Chart" name="bar-chart-demo">
  <ChartcnExampleBarChart />
</ComponentPreview>

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @chartcn/bar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @chartgpu/chartgpu
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/ui/chart.tsx" title="components/chart/chart.tsx" />

      <ComponentSource src="registry/ui/tooltip.ts" title="components/chart/tooltip.ts" />

      <ComponentSource src="registry/components/cartesian-chart/brush.ts" title="components/chart/cartesian-chart/brush.ts" />

      <ComponentSource src="registry/components/cartesian-chart/types.ts" title="components/chart/cartesian-chart/types.ts" />

      <ComponentSource src="registry/components/cartesian-chart/cartesian.ts" title="components/chart/cartesian-chart/cartesian.ts" />

      <ComponentSource src="registry/components/cartesian-chart/cartesian-chart.tsx" title="components/chart/cartesian-chart/cartesian-chart.tsx" />

      <ComponentSource src="registry/components/bar-chart/bar-chart.tsx" title="components/chart/bar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  ChartcnBarChart,
  type ChartConfig,
} from "@/components/chart/bar-chart";
```

```tsx
<ChartcnBarChart config={chartConfig} data={data} xDataKey="month">
  <ChartcnBarChart.Grid />
  <ChartcnBarChart.XAxis dataKey="month" />
  <ChartcnBarChart.Brush />
  <ChartcnBarChart.Legend />
  <ChartcnBarChart.Tooltip />
  <ChartcnBarChart.Bar dataKey="desktop" radius={5} />
  <ChartcnBarChart.Bar dataKey="mobile" radius={5} />
</ChartcnBarChart>
```

## Examples [#examples]

### Stacked columns [#stacked-columns]

<ComponentPreview title="stackType='stacked'" name="stacked-type-bar-chart-demo">
  <StackedBarChart />
</ComponentPreview>

### Percent columns [#percent-columns]

<ComponentPreview title="stackType='percent'" name="percent-type-bar-chart-demo">
  <PercentBarChart />
</ComponentPreview>

### Loading state [#loading-state]

<ComponentPreview title="isLoading='true'" name="loading-state-bar-chart-demo">
  <LoadingBarChart />
</ComponentPreview>

## API Reference [#api-reference]

### ChartcnBarChart [#chartcnbarchart]

| Prop            | Type                                                 | Default                                 |
| --------------- | ---------------------------------------------------- | --------------------------------------- |
| `data`          | `Data[]`                                             | `required`                              |
| `config`        | `ChartConfig`                                        | `required`                              |
| `children`      | `ReactNode`                                          | -                                       |
| `xDataKey`      | `string`                                             | -                                       |
| `stackType`     | `"default" \| "stacked" \| "expanded" \| "percent"`  | `"default"`                             |
| `animation`     | `boolean \| AnimationConfig`                         | `{ duration: 650, easing: "cubicOut" }` |
| `isLoading`     | `boolean`                                            | `false`                                 |
| `showBrush`     | `boolean`                                            | `false`                                 |
| `onBrushChange` | `({ startIndex: number; endIndex: number }) => void` | -                                       |

### Bar [#bar]

| Prop       | Type               | Default     |
| ---------- | ------------------ | ----------- |
| `dataKey`  | `string`           | `required`  |
| `radius`   | `number`           | `4`         |
| `barWidth` | `number \| string` | -           |
| `stackId`  | `string`           | `"chartcn"` |

### Shared parts [#shared-parts]

`Grid`, `XAxis`, `YAxis`, `Brush`, `Legend`, and `Tooltip` accept the concrete props documented by the [Line Chart](/docs/components/line-chart#shared-parts).