React Chartlet

npm version minified size

A dead simple and tiny React charting library


yarn add react-chartlet

Supported Charts

  • Sparkline
  • Pie
  • Bar
  • Line



import { Sparkline } from 'react-chartlet'

const YourPage = () => (
    data={[2, 5, 3, 8, 1]}

export default YourPage

API Reference


Property Type Default Description
data array [] An array of numbers
width string CSS width of your chart
height string 100% CSS height of your chart
min number smallest datapoint in data array The minimum value on the y axis
max number largest datapoint in data array The maximum value on the y axis
margin number or object { top: 5, bottom: 5 } Margin between the border of the chart and the line, either as a number to set all sides, or an object to set specific sides, like { top: 5, right: 5, bottom: 5, left: 5 }
style object {} Directly set the style object of the svg container
lineStyle object {} Set the style object of the line


To test the components in this library, follow the steps below:

  1. Clone the repo onto your machine
  2. Run yarn to install dependencies
  3. Run yarn storybook to start Storybook

You can set up stories to test components using this documentation


View Github