A little component for using Chartist with the choo framework!
- works with the
chooframework - quickly puts fully sick SVG charts within reach
$ npm install choo-chartist
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>
`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 })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! 💥
- At this point, the only known issue is that there are an indeteminate amount of unknown unknown issues.
- Are charts awesome?
Yes, correct.
- Is choo awesome?
Oh hells yeah!
MIT