Render sparklines as SVGs in React.

Charles Stover
Dec 9, 2019 · 2 min read
Image for post
Image for post
<Sparkline values={[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]} />
Image for post
Image for post
<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 , including accessibility text, color, and size.

Example

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

Image for post
Image for post

Read more 📖

The React Sparkline SVG is a small component that is . It is powered by the and serves as a renderer for the SVG’s path.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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