Nuns Practicing Misanthropy

    react-sparklines
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-sparklines package

    1.7.0 • Public • Published

    Beautiful and expressive sparklines component for React

    Build Status

    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>
    

    Install

    npm i react-sparklines

    DownloadsWeekly Downloads

    33,901

    Version

    1.7.0

    License

    MIT

    Last publish

    Collaborators

    • avatar