Bar Chart

The BarChart component is used to visualize data in a bar chart format. It is a wrapper around the Recharts BarChart component.

Usage

import { BarChart } from "@sparrowengg/twigs-charts";

const Chart = () => {
  return (
    <BarChart
      data={[
        {
          name: "Page A",
          UV: 4000,
          PV: 2400,
          AMT: 2400,
        },
        {
          name: "Page B",
          UV: 3000,
          PV: 1398,
          AMT: 2210,
        },
        {
          name: "Page C",
          UV: 2000,
          PV: 9800,
          AMT: 2290,
        },
      ]}
      dataKey="name"
      series={[
        {
          name: "UV",
          color: "#51D3D9",
        },
        {
          name: "PV",
          color: "#FEA58E",
        },
        {
          name: "AMT",
          color: "#BDA9EA",
        },
      ]}
    />
  );
};

The series object determines the order of the bars in the chart. The first item in the array will be the first bar, the second item will be the second bar, and so on. Additional properties like color, label, yAxisId, fill, stroke, unit, stackId, valueFormatter are optional and can be used to customize the bars.

Props

Examples

Multi data

Stacked

Stacked charts are useful when you want to compare multiple data points within a single bar. You can set type="stacked" to enable this.

With Legend

Legend is a useful way to add labels to the bars. You can set showLegend to true to enable this.

Two Y-axis

Two Y-axis are useful when you want to compare two different data points within a single bar. You can set showRightYAxis to true to enable this. Additionally yAxisId should be added to the series object, accepted values are left and right.

With Label and Unit

Labels can be enabled by setting showBarLabel to true. Unit can be added by setting unit to the series object.

With valueFormatter

valueFormatter can be used to format the values in the chart. It accepts a function that takes the value and returns a string.

With custom labels

label property can be passed to the series object to add custom labels to the bars.