Beautiful and expressive sparklines component for React
Live demos and docs: borisyankov.github.io/react-sparklines/
Install
npm install react-sparklines --save
Run demo
npm install
npm start
http://localhost:8080
Use
Import the Sparklines components that you need; for example to generate a simple chart:
import React from 'react';
import { Sparklines } from 'react-sparklines';
...
<Sparklines data={[5, 10, 5, 20, 8, 15]} limit={5} width={100} height={20} margin={5}>
</Sparklines>
Sparklines component is a container with the following properties:
data - the data set used to build the sparkline
limit - optional, how many data points to display at once
width, height - dimensions of the generated sparkline in the SVG viewbox. This will be automatically scaled (i.e. responsive) inside the parent container by default.
svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.
preserveAspectRatio - default: 'none', set this to modify how the sparkline should scale
margin - optional, offset the chart
min, max - optional, bound the chart
Basic Sparkline
import React from 'react';
import { Sparklines, SparklinesLine } from 'react-sparklines';
...
<Sparklines data={[5, 10, 5, 20]}>
<SparklinesLine color="blue" />
</Sparklines>
Bars
import React from 'react';
import { Sparklines, SparklinesBars } from 'react-sparklines';
...
<Sparklines data={[5, 10, 5, 20]}>
<SparklinesBars />
</Sparklines>
Spots
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
...
<Sparklines data={sampleData}>
<SparklinesLine style={{ fill: "none" }} />
<SparklinesSpots />
</Sparklines>
Reference Line
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
...
<Sparklines data={sampleData}>
<SparklinesLine />
<SparklinesReferenceLine type="mean" />
</Sparklines>
Normal Band
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesNormalBand } from 'react-sparklines';
...
<Sparklines data={sampleData}>
<SparklinesLine style={{ fill: "none" }}/>
<SparklinesNormalBand />
</Sparklines>