Simple

  
/** @jsx hJSX */

import Rx from 'rx'
import {run} from '@cycle/core'
import {makeDOMDriver, h, hJSX} from '@cycle/dom'
import { sparklines, sparklinesLine } from 'cyclejs-sparklines'

function main({DOM}) {
  const view$ = Rx.Observable.just(
  
    <span>
      <sparklines data={[5,10,5,20,8,15,16,19,13,14,12]}>
          <sparklinesLine />
      </sparklines>
    </span>
  
  );

  return { DOM: view$ }
}

run(main, {
  DOM: makeDOMDriver('#app', {'sparklines':sparklines, 'sparklinesLine':sparklinesLine})
  });

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>

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

import Rx from 'rx';
import {run} from '@cycle/core';
import {makeDOMDriver, h, hJSX} from '@cycle/dom';
import { sparklines, sparklinesSpots, sparklinesLine } from 'cyclejs-sparklines';

function makeDataSourceDriver(){
  return Rx.Observable.interval(100)
    .scan( (acc, x) => acc.concat([someRandomFunction()] ), []);
}

function dynamic1({DOM, DataSource}) {
  const view$ = DataSource.map( data => (
    <span>
      <sparklines data={data} limit={20}>
        <sparklinesLine color="#1c8cdc" />
        <sparklinesSpots />
      </sparklines>
      </span>
      
    ));
  return { DOM: view$ }
}
run(dynamic1, {
    DOM: makeDOMDriver('#dynamic1', {
      'sparklines':sparklines,
      'sparklinesSpots':sparklinesSpots,
      'sparklinesLine':sparklinesLine
      }),
    DataSource: makeDataSourceDriver 
  });


<sparklines data={data} limit={20}>
    <sparklinesBars style={{ fill: "#41c3f9", fillOpacity: ".25" }} />
    <sparklinesLine style={{ stroke: "#41c3f9", fill: "none" }} />
</sparklines>


<sparklines data={data} limit={20}>
    <sparklinesLine style={{ stroke: "none", fill: "#8e44af", fillOpacity: "1" }}/>
</sparklines>


<sparklines data={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>

Cycle.js Sparklines

Beautiful and expressive sparklines component for Cycle.js View on GitHub

npm install cyclejs-sparklines

Simple

Customizable

Spots

Bars

Dynamic

Reference Line

Normal Band

Real world examples