Bar Chart

Displays data in a bar chart.
Properties
stacked
xAxisLabel
yAxisLabel
Example
Source Code
Installation
"use client";

import React from "react";
import * as SubframeCore from "@subframe/core";
import { BarChart } from "@/subframe/components/BarChart";

function BarChartExample() {
  return (
    <BarChart
      stacked={false}
      categories={["Biology", "Business", "Psychology"]}
      data={[
        { Year: "2015", Psychology: 120, Business: 110, Biology: 100 },
        { Year: "2016", Psychology: 130, Business: 95, Biology: 105 },
        { Year: "2017", Psychology: 115, Business: 105, Biology: 110 },
        { Year: "2018", Psychology: 125, Business: 120, Biology: 90 },
        { Year: "2019", Psychology: 110, Business: 130, Biology: 85 },
        { Year: "2020", Psychology: 135, Business: 100, Biology: 95 },
        { Year: "2021", Psychology: 105, Business: 115, Biology: 120 },
        { Year: "2022", Psychology: 140, Business: 125, Biology: 130 },
      ]}
      index={"Year"}
    />
  );
}

export default BarChartExample;

Props

Bar Chart
Prop
Type
Default
Additional info
stacked
boolean
false

Examples

Axis Labels

Use xAxis and yAxis slots for greater axis customization. The SubframeCore.XAxis and SubframeCore.YAxis components can receive any of the props from the Recharts XAxis and Recharts YAxis components.

Customizing the Legend

Use the legend slot to render a custom legend. The SubframeCore.ChartLegend can receive any of the props from the Recharts Legend component.

Legend on bottom left

Custom rendered legend

Custom Tooltip

Use the tooltip slot to render a custom tooltip. The SubframeCore.ChartTooltip can receive any of the props from the Recharts Tooltip component.