quisido / react-sparkline-svg

A React Component that renders a sparkline as an SVG.

React Sparkline SVG

A React Component that renders a sparkline as an SVG.

Install

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

Use

import Sparkline from 'react-sparkline-svg';

function App() {
  return <Sparkline values={[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ]} />;
}

Props

decimals

Optional number

Sets the number of decimal places used to generate the sparkline. A larger number of decimal places will result in better precision, but more memory.

Default: 4

desc

Optional string

Sets the description of the sparkline. Used to populate the <desc> element.

_Default: 'A line graph representation of a value's change over time.'

fill

Optional string

Sets the color of the area underneath the sparkline.

Default: 'transparent'

height

Optional number

Sets the height of the sparkline's SVG element. Not to be confused with viewBoxHeight.

Default: '100%'

preserveAspectRatio

Optional string

Sets the preserveAspectRatio attribute of the SVG element.

Default: 'none'

stroke

Optional string

Sets the color of the sparkline itself.

Default: 'currentColor'

strokeWidth

Optional number or string

Sets the width of the sparkline itself. If using a number, this will be relative to the view box height and width.

Default: '1%'

title

Optional string

Sets the title of the sparkline SVG by populating the <title> element. This is useful for accessibility purposes and often appears as a tooltip, similar to the title attribute on an anchor tag.

Default: 'Sparkline'

values

Required array of numbers

Sets the values used to generate the sparkline.

viewBoxHeight

Optional number

Sets the height of the sparkline's view box. Not to be confused with height. The sparkline will always stretch to fit the view box.

Default: 100

viewBoxWidth

Optional number

Sets the width of the sparkline's view box. Not to be confused with width. The sparkline will always stretch to fit the view box.

Default: 100

width

Optional string

Sets the width of the sparkline's SVG element. Not to be confused with viewBoxWidth.

Default: '100%'

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.