Awesome

choo-chartist

A little component for using Chartist with the choo framework!

features

works with the choo framework
quickly puts fully sick SVG charts within reach

Installation

$ npm install choo-chartist

Usage

const html = require('choo/html')
const chartist = require('choo-chartist')

const chartType = 'Line'

module.exports = (state, prev, send) => html`
  <main>
    ${ chartist(chartType, state.chart.data, state.chart.options) }
  </main>
`

Styles

The stylesheets for Chartist are distributed with the Chartist npm package (a dependency of this package) and can be imported, for example, with sheetify:

const sf = require('sheetify')
sf('chartist', { global: true })

Internals

As per the design of Chartist, choo-chartist creates a "container" element (a <div>) with an onload event that initializes Chartist (and some other stuff).

The new Chartist object is then attached to the "container" element.

The component then caches the Chartist object and the "container" element.

Subsequent changes in state are passed through to the cached Chartist object, in particular to Chartist.update(), which constrains us to updating only the data and options, e.g. you cannot subsequently change the chart type.

After update() has been called and the SVG has been updated, the component returns the cached "container" element and what you see is the updated chart! :boom:

Known Issues

At this point, the only known issue is that there are an indeteminate amount of unknown unknown issues.

FAQ

Are charts awesome?

Yes, correct.

Is choo awesome?

Oh hells yeah!

License

MIT