@aravindhanak07/opcharts

A lightweight React + SVG chart library. Currently ships with BarChart and PieChart.

Install

npm install @aravindhanak07/opcharts

Peer dependencies

Your app must already have these installed:

• react >= 18
• react-dom >= 18

Usage

import { BarChart, PieChart } from "@aravindhanak07/opcharts";

const sales = [
  { label: "Jan", value: 30 },
  { label: "Feb", value: 80 },
  { label: "Mar", value: 45 },
];

const traffic = [
  { label: "Direct", value: 35 },
  { label: "Search", value: 50 },
  { label: "Social", value: 25 },
];

export function Dashboard() {
  return (
    <>
      <BarChart data={sales} width={560} height={300} showLegend />
      <PieChart data={traffic} width={360} height={360} />
    </>
  );
}

API

<BarChart />

| Prop | Type | Default | Description | |---|---|---|---| | data | { label: string; value: number }[] | — | Required. One bar per item. | | width | number | 500 | SVG width in px. | | height | number | 300 | SVG height in px. | | showLegend | boolean | false | Render a legend below the chart. | | colors | string[] | default palette | Custom palette (cycled per bar). |

<PieChart />

| Prop | Type | Default | Description | |---|---|---|---| | data | { label: string; value: number }[] | — | Required. One slice per item. | | width | number | 360 | SVG width in px. | | height | number | 360 | SVG height in px. | | showLegend | boolean | true | Render a legend below the chart. | | colors | string[] | default palette | Custom palette (cycled per slice). |

Both charts include a built-in hover tooltip.

Lower-level exports

Also exported for advanced use:

• Legend, Tooltip — the components used internally
• defaultPalette, getColor — color helpers
• linearScale, niceMax, arcPath, polarToCartesian — scaling/geometry helpers

Local development

npm install
npm run dev        # Vite playground at http://localhost:5173
npm run build      # build dist/ (esm + cjs + dts)
npm run typecheck  # tsc --noEmit