Skip to main content

​
Overview

Monthly Revenue
Jan – Jun 2026
Bar Chart renders comparative bar data using Recharts. It supports vertical bars (column chart), horizontal bars, grouped bars, stacked bars, and interactive tooltips.

​
Installation

npm install @araf-ds/core recharts

​
Usage

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

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

​
Grouped Bar Chart

<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

<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

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

​
API Reference

​
data
Record<string, any>[]
required
Array of data objects. Each object represents one group on the category axis.
​
dataKey
string
required
The key in each data object used as the category axis label (e.g. "month", "page").
​
bars
BarConfig[]
required
Array of bar configurations. Each item: { key: string, label: string, color: string, stackId?: string }.
​
height
number
default:"300"
Chart height in pixels.
​
orientation
string
default:"vertical"
Bar direction. "vertical" = column chart; "horizontal" = bar chart.
​
layout
string
default:"grouped"
Multi-bar layout. Values: grouped · stacked
​
showGrid
boolean
default:"true"
Show background grid lines.
​
showLegend
boolean
default:"true"
Show color legend below the chart.
​
showTooltip
boolean
default:"true"
Show interactive hover tooltips.
​
className
string
Additional class names for the chart container.

​
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

Do

  • 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

Don't

  • 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