Package Exports

react-sparklines-typescript

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-sparklines-typescript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

❗ Original Repo: https://github.com/borisyankov/react-sparklines - The original react-sparklines has not been updated for 3 years. This is a rewrite of the original library into Typescript and modern react classless components. The package smaller and faster.

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>