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?: 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?: 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?: string Sets the color of the area underneath the sparkline.

  Default: 'transparent'

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

  Default: '100%'

• preserveAspectRatio?: string Sets the preserveAspectRatio attribute of the SVG element.

  Default: 'none'

• stroke?: string Sets the color of the sparkline itself.

  Default: 'currentColor'

• strokeWidth?: number | 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?: 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.

  Default: 'Sparkline'

• values: number[]

  Sets the values used to generate the sparkline.

• viewBoxHeight?: 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?: 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?: string Sets the width of the sparkline's SVG element. Not to be confused with viewBoxWidth.

  Default: '100%'