Render sparklines as SVGs in React.

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:

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