> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Bar Chart

> A vertical or horizontal bar chart for comparing categorical data — built on Recharts with A'raf DS design tokens.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  <div style={{fontFamily:"Inter,sans-serif",maxWidth:"420px"}}>
    <div style={{fontSize:"13px",fontWeight:600,color:"#101828",marginBottom:"4px"}}>Monthly Revenue</div>
    <div style={{fontSize:"12px",color:"#667085",marginBottom:"16px"}}>Jan – Jun 2026</div>

    <div style={{display:"flex",alignItems:"flex-end",gap:"10px",height:"120px",paddingBottom:"0"}}>
      {[
                  {month:"Jan",value:65,height:"65%"},
                  {month:"Feb",value:80,height:"80%"},
                  {month:"Mar",value:55,height:"55%"},
                  {month:"Apr",value:90,height:"90%"},
                  {month:"May",value:72,height:"72%"},
                  {month:"Jun",value:85,height:"85%"},
                ].map(bar => (
                  <div key={bar.month} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:"4px",flex:1}}>
                    <div style={{width:"100%",height:bar.height,background:"#0479CE",borderRadius:"4px 4px 0 0",minHeight:"4px"}}></div>
                    <span style={{fontSize:"11px",color:"#667085"}}>{bar.month}</span>
                  </div>
                ))}
    </div>
  </div>
</div>

**Bar Chart** renders comparative bar data using Recharts. It supports vertical bars (column chart), horizontal bars, grouped bars, stacked bars, and interactive tooltips.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core recharts
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core recharts
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core recharts
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import { BarChart } from "@araf-ds/core"

const data = [
  { month: "Jan", revenue: 4000, expenses: 2400 },
  { month: "Feb", revenue: 3000, expenses: 1398 },
  { month: "Mar", revenue: 5000, expenses: 2800 },
  { month: "Apr", revenue: 2780, expenses: 3908 },
  { month: "May", revenue: 1890, expenses: 4800 },
  { month: "Jun", revenue: 2390, expenses: 3800 },
]

export default function Example() {
  return (
    <BarChart
      data={data}
      dataKey="month"
      bars={[
        { key: "revenue", label: "Revenue", color: "#0479CE" },
        { key: "expenses", label: "Expenses", color: "#CDE4F5" },
      ]}
      height={300}
    />
  )
}
```

***

## Variants

### Simple Bar Chart

```tsx theme={null}
<BarChart
  data={monthlyData}
  dataKey="month"
  bars={[{ key: "revenue", label: "Revenue", color: "#0479CE" }]}
  height={300}
/>
```

### Grouped Bar Chart

```tsx theme={null}
<BarChart
  data={data}
  dataKey="month"
  bars={[
    { key: "revenue", label: "Revenue", color: "#0479CE" },
    { key: "expenses", label: "Expenses", color: "#CDE4F5" },
    { key: "profit", label: "Profit", color: "#16A34A" },
  ]}
  height={300}
  layout="grouped"
/>
```

### Stacked Bar Chart

```tsx theme={null}
<BarChart
  data={data}
  dataKey="month"
  bars={[
    { key: "direct", label: "Direct", color: "#0479CE", stackId: "a" },
    { key: "referral", label: "Referral", color: "#93C5FD", stackId: "a" },
    { key: "organic", label: "Organic", color: "#BFDBFE", stackId: "a" },
  ]}
  layout="stacked"
  height={300}
/>
```

### Horizontal Bar Chart

```tsx theme={null}
<BarChart
  data={topPages}
  dataKey="page"
  bars={[{ key: "views", label: "Page Views", color: "#0479CE" }]}
  orientation="horizontal"
  height={300}
/>
```

***

## API Reference

<ParamField path="data" type="Record<string, any>[]" required>
  Array of data objects. Each object represents one group on the category axis.
</ParamField>

<ParamField path="dataKey" type="string" required>
  The key in each data object used as the category axis label (e.g. `"month"`, `"page"`).
</ParamField>

<ParamField path="bars" type="BarConfig[]" required>
  Array of bar configurations. Each item: `{ key: string, label: string, color: string, stackId?: string }`.
</ParamField>

<ParamField path="height" type="number" default="300">
  Chart height in pixels.
</ParamField>

<ParamField path="orientation" type="string" default="vertical">
  Bar direction. `"vertical"` = column chart; `"horizontal"` = bar chart.
</ParamField>

<ParamField path="layout" type="string" default="grouped">
  Multi-bar layout. Values: `grouped` · `stacked`
</ParamField>

<ParamField path="showGrid" type="boolean" default="true">
  Show background grid lines.
</ParamField>

<ParamField path="showLegend" type="boolean" default="true">
  Show color legend below the chart.
</ParamField>

<ParamField path="showTooltip" type="boolean" default="true">
  Show interactive hover tooltips.
</ParamField>

<ParamField path="className" type="string">
  Additional class names for the chart container.
</ParamField>

***

## Accessibility

* Charts include a `<title>` and `<desc>` inside the SVG for screen readers
* Use `aria-label` on the chart container to describe the data
* Provide a data table alternative for complex charts — charts are not accessible to all users
* Tooltip content is announced via `aria-live="polite"` on hover

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use bar charts for comparing discrete categories (months, products, regions)
    * Use stacked bars to show part-to-whole relationships within each category
    * Keep bar count under 12 per group for readability
    * Use color tokens consistently — primary `#0479CE` for the main series
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use bar charts for continuous time-series data — use Line Chart
    * Don't use more than 4 grouped bars per category — use a table instead
    * Don't start the value axis at a non-zero value — it distorts perception
    * Don't rely solely on color to distinguish bars — add labels or patterns
  </Card>
</CardGroup>