react-sparkline-canvas

React component for sparkline charts based on <canvas>

Demo

Getting started

npm install react-sparkline-canvas --save

import Sparkline from 'react-sparkline-canvas';

Usage

Basic example

<Sparkline
  data={[1,2,3,3,4,7,5,8,6,2,5,7,6]}
  width={200}
  height={200}
/>

Advanced example

<Sparkline
  data={[0,1,0,0,-5,6,0,0,3,4,1,5,4,4,-1, -8, 12]}
  type={'step'}
  width={800}
  height={400}
  padding={40}
  lineWidth={3}
  className={'somecss'}   
  strokeColor={{
    '20': '#ff355b',
    '30': '#ffc835',
    '45': '#32647d',
    '50': '#41828c',
    '85': '#22822c',
  }}
  gradDirection={'column'}
  showMinMax={false}
/>

Props

Prop	Default	PropType	Description
data	-	array	Values to plot, e.g. [1,2,3,4,5]
type	line	string	line, step, amplitude, reflected
width	200	number	Required
height	60	number	Required
padding	20	number	Canvas padding
className	null	string	CSS class name applied to canvas wrapper
lineWidth	3	number	Thickness of the sparkline
strokeColor	#000000	string | object | array	See strokeColor
gradDirection	column	string	Gradient direction: column or row
showMinMax	true	bool	Shows min/max value dot marker when true

The following props only work for amplitude sparkline type:

Prop	Default	PropType	Description
baseline	true	bool	Displays a baseline in the vertical middle when true
baselineColor	#cccccc	string	line, step, amplitude, reflected

Sparkline types

type	strokeColor	Responsive Plot	Constraints
line	Solid or Gradient	Width and Height
step	Solid or Gradient	Width and Height
amplitude	Solid or Gradient	Height only	Plots only positive numbers, negatives and zeros are plotted as blank
reflected	Solid (2 colors)	Height only	Plots only positive numbers, negatives and zeros are plotted as blank

strokeColor

a. Solid

Pass a CSS color value as string to strokeColor prop.

Examples:

<Sparkline strokeColor={'#ff0000'} />
 
<Sparkline strokeColor={'red'} />
 
<Sparkline strokeColor={'rgba(255,0,0,.5)'} />

b. Gradient

Pass an object to strokeColor prop, each property represents a color stop.

{
  stop: 'color',
  stop: 'color',
  stop: 'color'
}

stop is a value between 0 and 100 that represents the position between start and end in a gradient.

color is a CSS color value to display at the stop position.

Gradient direction prop

gradDirection	Description
column	Top to bottom
row	Left to right

Examples:

<Sparkline
  strokeColor={{
    '20': '#ff355b',
    '30': '#ffc835',
    '45': '#32647d',
    '50': '#41828c',
    '85': '#22822c',
  }}
/>
 
<Sparkline
  strokeColor={{
    '0': '#007AC9',
    '100': '#00c972',
  }}
  gradDirection={'row'}
/>

c. Reflected type

Pass an array to strokeColor prop, the first element represents main color and second one represents reflection color.

[mainColor, reflectionColor]

Example:

<Sparkline strokeColor={['#8c8c8c', '#e6e6e6']} />