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.