Sparklines component for Cycle.js
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Sparklines component for Cycle.js

Notice: this library uses a now deprecated version of cycle-dom

This is a full port of the react-sparklines component for Cycle.js.

Live demos and docs:


npm install cyclejs-sparklines --save

Run demo

npm install
npm start


/** @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(
      <sparklines data={[5,10,5,20,8,15,16,19,13,14,12]}>
          <sparklinesLine />

  return { DOM: view$ }

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

The sparkline component accept the following attributes:

  • data: the data set used to build the sparkline
  • limit: how many data points to display at once (optional)
  • width, height: dimensions of the component
  • margin: offset the chart (optional)
  • min, max: bound the chart (optional)

See the examples on for a complete list of parameters.

Basic Sparkline

<sparklines data={[5, 10, 5, 20]}>
  <sparklinesLine color="blue" />


<sparklines data={[5, 10, 5, 20]}>
  <sparklinesBars />


<sparklines data={sampleData}>
    <sparklinesLine style={{ fill: "none" }} />
    <sparklinesSpots />

Reference Line

<sparklines data={sampleData}>
    <sparklinesLine />
    <sparklinesReferenceLine type="mean" />

Normal Band

<sparklines data={sampleData}>
    <sparklinesLine style={{ fill: "none" }}/>
    <sparklinesNormalBand />