React Sparklines

Beautiful and expressive sparklines component for React View on GitHub

npm install react-sparklines

Simple


<Sparklines data={sampleData}>
    <SparklinesLine />
</Sparklines>
            

Simple Curve


<Sparklines data={sampleData}>
    <SparklinesCurve />
</Sparklines>
            

Customizable


<Sparklines data={sampleData}>
    <SparklinesLine color="#253e56" />
</Sparklines>
            

Spots


<Sparklines data={sampleData}>
    <SparklinesLine style={{ fill: "none" }} />
    <SparklinesSpots />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine color="#56b45d" />
    <SparklinesSpots style={{ fill: "#56b45d" }} />
</Sparklines>
            

<Sparklines data={sampleData} margin={6}>
    <SparklinesLine style={{ strokeWidth: 3, stroke: "#336aff", fill: "none" }} />
    <SparklinesSpots size={4}
        style={{ stroke: "#336aff", strokeWidth: 3, fill: "white" }} />
</Sparklines>
            

Bounds


<Sparklines data={sampleData} max={0.5}>
    <SparklinesLine />
</Sparklines>
            

Bars


<Sparklines data={sampleData}>
    <SparklinesBars style={{ fill: "#41c3f9" }} />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesBars style={{ stroke: "white", fill: "#41c3f9", fillOpacity: ".25" }} />
    <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
</Sparklines>
            

Dynamic


<Sparklines data={this.state.data} limit={20}>
    <SparklinesLine color="#1c8cdc" />
    <SparklinesSpots />
</Sparklines>
            

<Sparklines data={this.state.data} limit={20}>
    <SparklinesBars style={{ fill: "#41c3f9", fillOpacity: ".25" }} />
    <SparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
</Sparklines>
            

<Sparklines data={this.state.data} limit={20}>
    <SparklinesLine style={{ stroke: "none", fill: "#8e44af", fillOpacity: "1" }}/>
</Sparklines>
            

<Sparklines data={this.state.data} limit={10} >
    <SparklinesBars color="#0a83d8" />
</Sparklines>
            

Reference Line


<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="max" />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="min" />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="mean" />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="avg" />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine />
    <SparklinesReferenceLine type="median" />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesBars style={{ fill: 'slategray', fillOpacity: ".5" }} />
    <SparklinesReferenceLine />
</Sparklines>
            

Normal Band


<Sparklines data={sampleData}>
    <SparklinesLine style={{ fill: "none" }}/>
    <SparklinesNormalBand />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesLine style={{ fill: "none" }}/>
    <SparklinesNormalBand />
    <SparklinesReferenceLine type="mean" />
</Sparklines>
            

Real world examples


<Sparklines data={sampleData}>
    <SparklinesLine style={{ strokeWidth: 3, stroke: "#336aff", fill: "none" }} />
</Sparklines>
            

<Sparklines data={sampleData100} width={200}>
    <SparklinesLine style={{ stroke: "#2991c8", fill: "none"}} />
    <SparklinesSpots />
    <SparklinesNormalBand style={{ fill: "#2991c8", fillOpacity: .1 }} />
</Sparklines>
            

<Sparklines data={sampleData100}>
    <SparklinesLine style={{ stroke: "black", fill: "none" }} />
    <SparklinesSpots style={{ fill: "orange" }} />
</Sparklines>
            

<Sparklines data={sampleData}>
    <SparklinesBars style={{ stroke: "white", strokeWidth: "1", fill: "#40c0f5" }} />
</Sparklines>
            

<Sparklines data={sampleData} height={80}>
    <SparklinesLine style={{ stroke: "#8ed53f", strokeWidth: "1", fill: "none" }} />
</Sparklines>
            

<Sparklines data={sampleData} height={80}>
    <SparklinesLine style={{ stroke: "#d1192e", strokeWidth: "1", fill: "none" }} />
</Sparklines>
            

<Sparklines data={sampleData} height={40}>
    <SparklinesLine style={{ stroke: "#559500", fill: "#8fc638", fillOpacity: "1" }} />
</Sparklines>
            

<Sparklines data={sampleData} style={{background: "#272727"}} margin={10} height={40}>
    <SparklinesLine style={{ stroke: "none", fill: "#d2673a", fillOpacity: ".5" }} />
</Sparklines>
            

<Sparklines data={sampleData} style={{background: "#00bdcc"}} margin={10} height={40}>
    <SparklinesLine style={{ stroke: "white", fill: "none" }} />
    <SparklinesReferenceLine
        style={{ stroke: 'white', strokeOpacity: .75, strokeDasharray: '2, 2' }} />
</Sparklines>