Bar chart

Basic bar chart

Code

import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";

import CustomTooltip from "../CustomToolTip";

const locale = "en-us";

/** Convert a Date object to month & year string, e.g. "Jan 2024" */
const monthYearFormatter = new Intl.DateTimeFormat(locale, {
  month: "short",
  year: "numeric",
});

const data = [
  { value: 222, date: "2024-01" },
  { value: 204, date: "2024-02" },
  { value: 205, date: "2024-03" },
  { value: 231, date: "2024-04" },
  { value: 215, date: "2024-05" },
  { value: 214, date: "2024-06" },
  { value: 228, date: "2024-07" },
  { value: 231, date: "2024-08" },
].map((x) => ({
  ...x,
  formattedDate: monthYearFormatter.format(new Date(x.date)),
}));

export default function BasicBarChart() {
  return (
    <BarChart
      responsive
      height="100%"
      width="100%"
      data={data}
      margin={{
        // adjust margins to fit your data
        left: -20,
      }}
    >
      <defs>
        <linearGradient id="basicBarDemoGradient" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--bfc-chill)" />
          <stop offset="100%" stopColor="var(--bfc-chill)" stopOpacity={0.7} />
        </linearGradient>
      </defs>
      <CartesianGrid
        strokeDasharray="5 5"
        vertical={false}
        stroke="var(--bfc-base-c-dimmed)"
      />
      <XAxis
        axisLine={false}
        tickLine={false}
        dataKey="formattedDate"
        tick={{ fill: "var(--bfc-base-c-2)" }}
        dy={8}
      />
      <YAxis
        axisLine={false}
        tickLine={false}
        type="number"
        tick={{ fill: "var(--bfc-base-c-2)" }}
      />
      <Tooltip cursor={false} content={<CustomTooltip />} />
      <Bar dataKey="value" fill="url(#basicBarDemoGradient)" radius={8} />
    </BarChart>
  );
}

Multiple bars

You can add as many <Bar> components as you like, each with their own dataKey (matching the property in your dataset) and fill color.

Code changes

<Bar
  dataKey="value1"
  fill="var(--bfc-chill)"
  name="Data 1"
  radius={4}
/>
<Bar
  dataKey="value2"
  fill="var(--bfc-warning)"
  name="Data 2"
  radius={4}
/>
<Bar
  dataKey="value3"
  fill="var(--bfc-success)"
  name="Data 3"
  radius={4}
/>

Stacked bar chart

Stack <Bar> instances using a common stackId. Note that the radius values differ between the stacked bars.

Code changes

<Bar
  dataKey="value1"
  fill="var(--bfc-chill)"
  name="Data 1"
  stackId="myStack"
  radius={[0, 0, 8, 8]}
/>
<Bar
  dataKey="value2"
  fill="var(--bfc-warning)"
  name="Data 2"
  stackId="myStack"
  radius={0}
/>
<Bar
  dataKey="value3"
  fill="var(--bfc-success)"
  name="Data 3"
  stackId="myStack"
  radius={[8, 8, 0, 0]}
/>