# Bar Chart

Grouped, stacked and percent bars, plus range, histogram, candlestick and single-bar segments.

Group: Charts

## Import

```tsx
import { BarChart, BarSegment, CandlestickChart, Histogram, RangeBarChart } from "@indoku/ui"
```

## Examples

### Grouped

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function BarGrouped() {
  return <Box maxW="2xl"><BarChart series={series} categories={months} legend /></Box>
}
```

### Stacked

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function BarStacked() {
  return <Box maxW="2xl"><BarChart series={stacked} categories={months} mode="stacked" legend /></Box>
}
```

### Percent

Each bar is normalized to 100%.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const stacked = [
  { name: "Web", values: [40, 55, 50, 80, 70, 110] },
  { name: "Mobile", values: [30, 45, 40, 70, 65, 90] },
  { name: "API", values: [20, 30, 25, 50, 45, 70] },
]

function BarPercent() {
  return <Box maxW="2xl"><BarChart series={stacked} categories={months} mode="percent" legend /></Box>
}
```

### Range

Floating bars from `min` to `max`.

```tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const revenue = [120, 180, 150, 240, 210, 300]
const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

const costs = [80, 110, 100, 150, 140, 170]
const series = [
  { name: "Revenue", values: revenue },
  { name: "Costs", values: costs },
]

function BarRange() {
  const data = months.map((label, i) => ({ label, min: costs[i] / 2, max: revenue[i] / 2 + 40 }))
  return <Box maxW="2xl"><RangeBarChart data={data} /></Box>
}
```

### Histogram

Raw values are binned for you.

```tsx
function BarHistogram() {
  const values = Array.from({ length: 120 }, (_, i) => 50 + 18 * Math.sin(i * 1.7) + 12 * Math.cos(i * 0.9) + (i % 7))
  return <Box maxW="2xl"><Histogram values={values} bins={10} name="Orders" /></Box>
}
```

### Candlestick

OHLC data; green when close is at or above open.

```tsx
function BarCandlestick() {
  const data = [
    { label: "Mon", open: 100, high: 112, low: 96, close: 108 },
    { label: "Tue", open: 108, high: 115, low: 101, close: 103 },
    { label: "Wed", open: 103, high: 110, low: 99, close: 109 },
    { label: "Thu", open: 109, high: 121, low: 107, close: 118 },
    { label: "Fri", open: 118, high: 124, low: 110, close: 112 },
  ]
  return <Box maxW="2xl"><CandlestickChart data={data} /></Box>
}
```

### Bar segment

One horizontal bar split by share, with a legend.

```tsx
function BarSegmentDemo() {
  return (
    <Box maxW="lg">
      <BarSegment data={[{ name: "Stocks", value: 5200 }, { name: "Bonds", value: 2400 }, { name: "Cash", value: 1100 }, { name: "Other", value: 600 }]} />
    </Box>
  )
}
```

## Props

### BarChart

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `'grouped' \| 'stacked' \| 'percent'` | `'grouped'` | How series combine. |
| `gap` | `number` | `0.3` | Gap between groups, 0-1. |
| `joined` | `boolean` | `false` | No gap (histogram look). |

### Other bar charts

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `RangeDatum[] \| CandleDatum[] \| BarSegmentDatum[]` |  | Data for RangeBarChart, CandlestickChart and BarSegment. |
| `values / bins` | `number[] / number` |  | Histogram input. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Line Chart: https://ui.indoku.org/docs/line-chart
- Pie & Donut: https://ui.indoku.org/docs/pie-chart