https://github.com/rexmortus/choo-chartist

A little component for using Chartist with the choo framework!
https://github.com/rexmortus/choo-chartist

Last synced: about 17 hours ago
JSON representation

A little component for using Chartist with the choo framework!

• Host: GitHub
• URL: https://github.com/rexmortus/choo-chartist
• Owner: rexmortus
• License: mit
• Created: 2016-08-15T06:34:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-09T00:19:35.000Z (about 7 years ago)
• Last Synced: 2024-12-26T14:05:52.397Z (16 days ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-choo - choo-chartist - A little component for using [Chartist](https://gionkunz.github.io/chartist-js/) with the choo framework. (Uncategorized / Uncategorized)

README

        
# 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

```javascript

const html = require('choo/html')

const chartist = require('choo-chartist')

const chartType = 'Line'

module.exports = (state, prev, send) => html`

  

    ${ chartist(chartType, state.chart.data, state.chart.options) }

  

`

```

## 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`:

```javascript

const sf = require('sheetify')

sf('chartist', { global: true })

```

## Internals

As per the design of `Chartist`, `choo-chartist` creates a "container" element (a `
`) 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()](https://gionkunz.github.io/chartist-js/api-documentation.html#chartistbase-function-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!

## See Also

- [Charist](https://gionkunz.github.io/chartist-js/)

- [Choo](https://github.com/yoshuawuyts/choo)

## License

MIT