noteiqbarchart

A flexible React BarChart component built with Recharts. Supports multiple bars, stacking, tooltips, legends, grids, reference lines, brush, and full customization.

Installation

npm install noteiqbarchart

or

yarn add noteiqbarchart

Usage

import React from "react";
import BarChart from "noteiqbarchart";

const data = [
  { name: "Page A", value: 400 },
  { name: "Page B", value: 300 },
  { name: "Page C", value: 200 },
  { name: "Page D", value: 278 },
];

const MyBarChart = () => (
  <BarChart
    data={data}
    xKey="name"
    width={700}
    height={300}
    bars={[{ dataKey: "value", fill: "#8884d8" }]}
    showTooltip={true}
    showLegend={true}
  />
);

export default MyBarChart;

Props

| Prop | Type | Default | Description | | ---------------- | ------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------ | | data | Array (required) | [] | Array of data objects for the chart | | width | string \| number | "100%" | Width of the chart | | height | number | 250 | Height of the chart | | xKey | string | "name" | Key for X-axis values | | bars | Array<Object> | [{ dataKey: "value", fill: "#8884d8" }] | Array of bar configurations. Each object can contain all <Bar> props from Recharts | | showGrid | boolean | true | Show Cartesian grid | | gridProps | Object | { strokeDasharray: "3 3", stroke: "#ccc" } | Props passed to <CartesianGrid> | | showTooltip | boolean | true | Show tooltip on hover | | tooltipProps | Object | {} | Props passed to <Tooltip> | | showLegend | boolean | false | Show chart legend | | legendProps | Object | {} | Props passed to <Legend> | | referenceLines | Array<Object> | [] | Array of reference line objects (<ReferenceLine> props) | | brushProps | Object | null | Props passed to <Brush> (adds zoom/scroll) | | xAxisProps | Object | {} | Props passed to <XAxis> | | yAxisProps | Object | {} | Props passed to <YAxis> | | chartProps | Object | {} | Props passed to <BarChart> |

Features

• Multiple <Bar> series with custom colors
• Support for stacked bars (stackId)
• Customizable X/Y axes
• Tooltips and legends
• Grid lines
• Reference lines (thresholds, targets)
• Brush support (scrolling/zooming)
• Per-bar customization with <Cell>
• Labels with <LabelList>
• Full pass-through for Recharts props

Example with Multiple Bars

<BarChart
  data={[
    { name: "Jan", uv: 400, pv: 240 },
    { name: "Feb", uv: 300, pv: 456 },
    { name: "Mar", uv: 200, pv: 139 },
  ]}
  xKey="name"
  width={700}
  height={300}
  bars={[
    { dataKey: "uv", fill: "blue", labelList: { position: "top" } },
    { dataKey: "pv", fill: "red" },
  ]}
  showTooltip
  showLegend
  referenceLines={[{ y: 300, stroke: "green", label: "Target" }]}
/>