react-sparkline-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 element. This is useful for accessibility purposes and often appears as a tooltip, similar to the title attribute on an anchor tag.</p> <p><em>Default: 'Sparkline'</em></p> <h5 id="user-content-values" data-level="3"><a href="#user-content-values">values</a></h5> <p><em>Required</em> array of numbers</p> <p>Sets the values used to generate the sparkline.</p> <h5 id="user-content-viewboxheight" data-level="3"><a href="#user-content-viewboxheight">viewBoxHeight</a></h5> <p><em>Optional</em> number</p> <p>Sets the height of the sparkline's view box. Not to be confused with <code>height</code>. The sparkline will always stretch to fit the view box.</p> <p><em>Default: 100</em></p> <h5 id="user-content-viewboxwidth" data-level="3"><a href="#user-content-viewboxwidth">viewBoxWidth</a></h5> <p><em>Optional</em> number</p> <p>Sets the width of the sparkline's view box. Not to be confused with <code>width</code>. The sparkline will always stretch to fit the view box.</p> <p><em>Default: 100</em></p> <h5 id="user-content-width" data-level="3"><a href="#user-content-width">width</a></h5> <p><em>Optional</em> string</p> <p>Sets the width of the sparkline's SVG element. Not to be confused with <code>viewBoxWidth</code>.</p> <p><em>Default: '100%'</em></p>