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']} />