Render sparklines as SVGs in React.

<Sparkline values={[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]} />
<Sparkline
fill="rgba(128, 128, 128, 0.05)"
stroke="rgba(192, 128, 64, 0.75)"
strokeWidth={1}
values={[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]}
viewBoxHeight={32}
viewBoxWidth={800}
/>

With just a few, customizable props, you can have beautiful SVG sparklines ready for your React application.

Getting started 🔰

You can install the Sparkline component via NPM or Yarn:

  • npm install react-sparkline-svg or
  • yarn add react-sparkline-svg

Once installed, it’s easy to import and use:

import Sparkline from 'react-sparkline-svg';function MyComponent() {
return <Sparkline values={[ 1, 2, 3 ]} />;
}

The values prop — an array of numbers — is the only required prop.

Customization 💈

You can find the full documentation for each prop on GitHub, including accessibility text, color, and size.

Example

I personally use the sparkline on my portfolio as a subtle background image that denotes the weekly downloads of my NPM packages over time.

Read more 📖

The React Sparkline SVG is a small component that is open-source on GitHub. It is powered by the Sparkline SVG class and serves as a renderer for the SVG’s path.

Senior front end engineer / charlesstover.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store