react ~10 KB 0 deps v0.1.0 ↗ GitHub ↗

@mshafiqyajid/react-chart

Pure SVG chart components — BarChart, LineChart, PieChart. Animations, legends, labels, multi-series. Zero external dependencies.

Playground #

AnimatedTooltipValues

Install #

npm install @mshafiqyajid/react-chart

Quick start #

import { BarChart, LineChart, PieChart } from "@mshafiqyajid/react-chart/styled";
import "@mshafiqyajid/react-chart/styles.css";

const data = [
  { label: "Jan", value: 42 },
  { label: "Feb", value: 68 },
  { label: "Mar", value: 55 },
];

<BarChart data={data} height={240} showValues animated />
<LineChart data={data} height={240} showDots showGrid animated />
<PieChart data={pieData} showLegend animated />

BarChart props #

Prop	Type	Default	Description
data	DataPoint[] \| SeriesDataPoint[]	—	Chart data
width	number	600	SVG width
height	number	300	SVG height
direction	"vertical" \| "horizontal"	"vertical"	Bar orientation
stacked	boolean	false	Stacked bars (multi-series)
gap	number	4	Gap between bars in pixels
radius	number	3	Bar corner radius
showValues	boolean	false	Show value labels on bars
animated	boolean	false	Animate on mount
colors	string[]	—	Custom bar colors (overrides tone)
onClick	(point, index) => void	—	Bar click handler
xLabel	string	—	X-axis label
yLabel	string	—	Y-axis label
tooltip	boolean	true	Show hover tooltip

LineChart props #

Prop	Type	Default	Description
data	DataPoint[] \| SeriesDataPoint[]	—	Chart data
width	number	600	SVG width
height	number	300	SVG height
showGrid	boolean	false	Show grid lines
showDots	boolean	true	Show data point dots
showLabels	boolean	false	Show X-axis labels
showLegend	boolean	false	Show series legend
smooth	boolean	false	Curved line interpolation
tone	"neutral" \| "primary"	"neutral"	Line color tone (flat data)
animated	boolean	false	Animate on mount
colors	string[]	—	Custom line colors (overrides tone)
area	boolean	false	Fill area under the line
onClick	(point, index) => void	—	Data point click handler
xLabel	string	—	X-axis label
yLabel	string	—	Y-axis label
tooltip	boolean	true	Show hover tooltip

PieChart props #

Prop	Type	Default	Description
data	DataPoint[]	—	Slice data (with optional color)
size	number	300	SVG size in px
donut	boolean	false	Render as donut chart
donutWidth	number	60	Donut ring thickness
showLabels	boolean	false	Show slice labels inside arcs
showLegend	boolean	false	Show color legend
animated	boolean	false	Animate on mount
onClick	(slice, index) => void	—	Slice click handler
tooltip	boolean	true	Show hover tooltip
innerLabel	ReactNode	—	Label rendered in donut center

Edit this page on GitHub