Bar chart

Basic bar chart

Code

import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  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 (
    <ResponsiveContainer>
      <BarChart
        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-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>
    </ResponsiveContainer>
  );
}
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  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 (
    <ResponsiveContainer>
      <BarChart
        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-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>
    </ResponsiveContainer>
  );
}

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}
/>
<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]}
/>
<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]}
/>