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.

Grid Axis

The gridAxis prop controls which grid lines are rendered. Accepted values are 'x' (default), 'y', 'xy', and 'none'. 'x' renders horizontal lines, 'y' renders vertical lines, 'xy' renders both. Use 'none' for a clean chart without any grid lines.

Reference Lines

Reference lines can be added using the referenceLines prop. Each entry is a Recharts ReferenceLine configuration object, supporting y, x, yAxisId, stroke, strokeDasharray, label, and all other ReferenceLine props.

Legend Position

Legend position and alignment can be controlled via legendProps. Pass any Recharts Legend props directly.

<BarChart
  showLegend
  legendProps={{ verticalAlign: "bottom", align: "center" }}
  ...
/>