https://github.com/bahrus/xtal-chart-istic
Polymer based web component wrapper around the chartist library
https://github.com/bahrus/xtal-chart-istic
Last synced: 3 months ago
JSON representation
Polymer based web component wrapper around the chartist library
- Host: GitHub
- URL: https://github.com/bahrus/xtal-chart-istic
- Owner: bahrus
- Created: 2017-07-08T17:50:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-14T20:33:23.000Z (almost 6 years ago)
- Last Synced: 2025-02-08T07:34:01.029Z (4 months ago)
- Language: JavaScript
- Size: 191 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# \
Vanilla-ish web component wrapper around the chartist library.
The web component itself is ~1.4kb minified, gzipped.
The chartist library is ~12kb minified, gzipped.
The default css is ~1.4kb minified, gzipped.
## Syntax
chartist basically supports three chart types:
```html
```
The properties lineChart, pieChart, barChart needs to consist of two properties:
data and options, e.g.:
```html
```
These data and options subproperties are passed to the second and third arguments of [chartist api](https://gionkunz.github.io/chartist-js/getting-started.html):
```JavaScript
this.chart = new Chartist.Pie(
this._chartTarget,
this._pieChart.data,
this._pieChart.options,
this._pieChart.responsiveOptions,
);
```
As you can see, there's a third sub property that can be passed in -- responsiveOptions, which are demonstrated frequently in the chartist examples.
"draw" is a boolean attribute / property that allows you to delay or prevent rendering (for example, if element is hidden);
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Running Tests
```
$ polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.