# Beautiful and expressive sparklines component for React [![Build Status](https://travis-ci.org/borisyankov/react-sparklines.svg?branch=master)](https://travis-ci.org/borisyankov/react-sparklines) Live demos and docs: [borisyankov.github.io/react-sparklines/](http://borisyankov.github.io/react-sparklines/) ![](http://borisyankov.github.io/react-sparklines/img/dynamic.gif) ## 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: ![](http://borisyankov.github.io/react-sparklines/img/basic.png) ``` import React from 'react'; import { Sparklines } from 'react-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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/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 ![](http://borisyankov.github.io/react-sparklines/img/customizable.png) ``` import React from 'react'; import { Sparklines, SparklinesLine } from 'react-sparklines'; ... ``` #### Bars ![](http://borisyankov.github.io/react-sparklines/img/bars.png) ``` import React from 'react'; import { Sparklines, SparklinesBars } from 'react-sparklines'; ... ``` #### Spots ![](http://borisyankov.github.io/react-sparklines/img/spots.png) ``` import React from 'react'; import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines'; ... ``` #### Reference Line ![](http://borisyankov.github.io/react-sparklines/img/referenceline.png) ``` import React from 'react'; import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines'; ... ``` #### Normal Band ![](http://borisyankov.github.io/react-sparklines/img/normalband.png) ``` import React from 'react'; import { Sparklines, SparklinesLine, SparklinesNormalBand } from 'react-sparklines'; ... ```

			Stars	Issues	Version	Updated	Created	Size
	react-chartist		528	42	0.14.4	4 years ago	10 years ago
	react-sparklines		2,834	66	1.7.0	7 years ago	9 years ago

react-chartist vs react-sparklines

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past