@granite-elements/granite-c3

A lightweight element wrapping-up C3.js, D3-based chart library.

Stats

StarsIssuesVersionUpdatedCreatedSize
@granite-elements/granite-c3
733.2.03 years ago3 years agoMinified + gzip package size for @granite-elements/granite-c3 in KB

Readme

Published on webcomponents.org Vaadin Directory availability

granite-c3

A lightweight element wrapping-up C3.js, D3-based chart library

Based on Polymer 3.x. The legacy Polymer 2.x version is available here

Doc & demo

https://lostinbrittany.github.io/granite-c3

Usage

<granite-c3 data='{"x": "x", "columns": [["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],["data1", 30, 200, 100, null, 150, 250],["data2",130, 340, 200, null, 200, 350]],"type": "step"}' axis='{ "x": {"type": "timeseries", "tick": { "format": "%Y-%m-%d"} } }'></granite-c3>

Install

Install the component using Bower:

$ bower install LostInBrittany/granite-c3 --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill (if needed):

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    
  2. Import Custom Element:

    <link rel="import" href="bower_components/granite-c3/granite-c3.html">
    
  3. Start using it!

    <granite-c3 data="{{data}}" axis="{{axis}}"></granite-c3>
    

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.