Composable charts
built for React

Polished, typed SVG charts you can drop into any React app and style however you want.

Get started $ npm install chartlyx

Try it live

Adjust the stroke color, curve, and area fill; the chart and the code update together.

Stroke color

Curve

Area fill

LivePreview.tsx
import { Area, CartesianGrid, ChartContainer, Line, LinearGradient, XAxis, YAxis } from 'chartlyx';

<ChartContainer data={data} xKey="label" xScaleType="band" yKey="value" yScaleType="linear">
  <LinearGradient id="fill" from="#5eead4" to="#5eead4" fromOpacity={0.25} toOpacity={0} />
  <CartesianGrid stroke="#334155" dashArray="4 6" />
  <XAxis />
  <YAxis />
  <Area fill="url(#fill)" curve="monotone" />
  <Line stroke="#5eead4" strokeWidth={2} curve="monotone" />
</ChartContainer>

Line, Bar, Donut, Radar, Stacked, Scatter, Composed: one library.

Line
Bar
Donut
Radar
Stacked
Scatter
Composed