# react-sparklines

> Beautiful and expressive Sparklines component for React

Latest version **1.7.0** (published 2017-07-27) · MIT license · 249.3K weekly downloads

## Install

```sh
npm install react-sparklines
pnpm add react-sparklines
yarn add react-sparklines
bun add react-sparklines
```

## Health

**Score 38/100 (D)** — status: abandoned.

Positive: moderate downloads; has types package; no vulnerabilities; high quality score.

Warnings: no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.0 |
| Published | 2017-07-27 |
| First published | 2015-06-29 |
| Weekly downloads | 249.3K |
| License | MIT |
| TypeScript types | separate (@types/react-sparklines) |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2850 |
| Author | Boris Yankov |
| Maintainers | borisyankov |
| Keywords | react, component, react-component, charts, sparklines, visualization, jsx |

## Links

- npm: https://www.npmjs.com/package/react-sparklines
- Repository: https://github.com/borisyankov/react-sparklines
- Homepage: https://github.com/borisyankov/react-sparklines#readme
- Issues: https://github.com/borisyankov/react-sparklines/issues
- npm.io page: https://npm.io/package/react-sparklines

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
- [@syncfusion/ej2-diagrams](https://npm.io/package/@syncfusion/ej2-diagrams.md) — 35.0K weekly downloads

## Recent versions

- 1.7.0 (latest) — 2017-07-27
- 1.6.0 — 2016-07-06
- 1.5.2 — 2016-04-23
- 1.5.1 — 2016-04-07
- 1.5.0 — 2016-03-13
- 1.4.2 — 2015-11-07
- 1.4.1 — 2015-11-06
- 1.4.0 — 2015-11-04
- 1.3.0 — 2015-10-18
- 1.2.2 — 2015-09-24
- 1.2.0 — 2015-09-24
- 1.1.2 — 2015-09-23
- 1.1.1 — 2015-09-16
- 1.1.0 — 2015-09-06
- 1.0.3 — 2015-08-13
- … 14 more at https://npm.io/package/react-sparklines/versions

## README

# 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 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](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';
...
<Sparklines data={[5, 10, 5, 20]}>
  <SparklinesLine color="blue" />
</Sparklines>
```

#### Bars

![](http://borisyankov.github.io/react-sparklines/img/bars.png)


```
import React from 'react';
import { Sparklines, SparklinesBars } from 'react-sparklines';
...
<Sparklines data={[5, 10, 5, 20]}>
  <SparklinesBars />
</Sparklines>
```

#### Spots

![](http://borisyankov.github.io/react-sparklines/img/spots.png)


```
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
...
<Sparklines data={sampleData}>
    <SparklinesLine style={{ fill: "none" }} />
    <SparklinesSpots />
</Sparklines>
```

#### Reference Line

![](http://borisyankov.github.io/react-sparklines/img/referenceline.png)


```
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
...
<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="mean" />
</Sparklines>
```

#### Normal Band

![](http://borisyankov.github.io/react-sparklines/img/normalband.png)


```
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesNormalBand } from 'react-sparklines';
...
<Sparklines data={sampleData}>
    <SparklinesLine style={{ fill: "none" }}/>
    <SparklinesNormalBand />
</Sparklines>
```

---
_Source: https://npm.io/package/react-sparklines · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._