Bar Graph

A versatile stacked bar graph component for visualizing comparative data across multiple categories with interactive tooltips and legends.

Usage

import BarGraph from '@/components/BarGraph';

export default function MyPage() {
  // Data for the bar graph
  const data = [
    { xValue: 'Jan', A: 20, B: 30, C: 15 },
    { xValue: 'Feb', A: 25, B: 25, C: 20 },
    { xValue: 'Mar', A: 30, B: 20, C: 25 },
    { xValue: 'Apr', A: 35, B: 15, C: 30 }
  ];

  // Keys to use for stacking
  const keys = ['A', 'B', 'C'];

  return (
    <BarGraph 
      width={600}
      height={400}
      data={data}
      keys={keys}
      colors={['#3b82f6', '#10b981', '#f59e0b']}
    />
  );
}

Examples

Basic Bar Graph

A simple stacked bar graph with default colors.

const data = [
  { xValue: 'Jan', A: 20, B: 30, C: 15 },
  { xValue: 'Feb', A: 25, B: 25, C: 20 },
  { xValue: 'Mar', A: 30, B: 20, C: 25 },
  { xValue: 'Apr', A: 35, B: 15, C: 30 }
];

const keys = ['A', 'B', 'C'];

<BarGraph 
  width={600}
  height={400}
  data={data}
  keys={keys}
/>

Custom Colors

A bar graph with custom colors for each data series.

<BarGraph 
  width={600}
  height={400}
  data={data}
  keys={['A', 'B', 'C']}
  colors={['#3b82f6', '#10b981', '#f59e0b']}
/>

Financial Data Visualization

A bar graph showing financial data with revenue, expenses, and profit.

Revenue

Expenses

Profit

const financialData = [
  { xValue: 'Q1', Revenue: 120, Expenses: 90, Profit: 30 },
  { xValue: 'Q2', Revenue: 150, Expenses: 100, Profit: 50 },
  { xValue: 'Q3', Revenue: 180, Expenses: 110, Profit: 70 },
  { xValue: 'Q4', Revenue: 200, Expenses: 120, Profit: 80 }
];

<BarGraph 
  width={600}
  height={400}
  data={financialData}
  keys={['Revenue', 'Expenses', 'Profit']}
  colors={['#0ea5e9', '#ef4444', '#22c55e']}
/>