# Bar Chart

> Charts in Twentyfirst UI.

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/BarChart/)

## Example

```tsx
import { BarChart } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        maxWidth: 620,
      }}
    >
      <BarChart
        data={[
          {
            label: "Mon",
            value: 32,
          },
          {
            label: "Tue",
            value: 48,
          },
          {
            label: "Wed",
            value: 41,
          },
          {
            label: "Thu",
            value: 66,
            tint: "lilac",
          },
          {
            label: "Fri",
            value: 58,
          },
          {
            label: "Sat",
            value: 22,
          },
          {
            label: "Sun",
            value: 18,
          },
        ]}
      />
    </div>
  );
}
```

## Props

### BarChart

| Prop | Type | Notes |
| --- | --- | --- |
| `data` | `{ label: string; value: number; tint?: Tint \| "ink" }[]` | Required |
| `tint?` | `Tint \| "ink"` |  |
| `height?` | `number` |  |
| `width?` | `number` |  |
| `barWidth?` | `number` |  |
| `format?` | `(v: number) => string` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |