Directory

xtal-chart-istic - Vaadin Add-on Directory

Polymer based web component wrapper around the chartist library xtal-chart-istic - Vaadin Add-on Directory
# \ 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.