A web component wrapper for ZingChart
npm install zingchart-web-componentInstall the zingchart-web-component package via npm
$ npm install zingchart-web-component
ZingChart is already included as a dependency, so there's no need to download and include it.
This web component exposes out the main web component, as well as chart-specific components such as for readability and convenience.
Depending on how you include this package, your inclusion will be different.
Import the generic zingchart component
``js`
import ZingChart from 'zingchart-web-component';
customElements.define('zing-chart', ZingChart);
OR
Manually import each chart and register it as a web component.
`js`
import {Line} from 'zingchart-web-component/charts/ZCLine.js';
customElements.define('zc-line', Line);
The ZingChart web component is a fully functional web component and exposes all methods and events.
`html`
The data attribute takes the exact same JSON that the ZingChart library uses.
We can also simplifiy the example by using our line chart component:
`html`
Note the absence of a "id" property. We autogenerate a id property so you don't have to (you can still provide one).
While everything can be configured via the data property, you can also fully configure ZingChart via child components.
Each configuration property that ZingChart accepts can also be used as a child-component prefixed by 'zc-'.
For instance, if we want to set our data for our chart with a component, we would use the zc-series-# components:
`html`
Similarly, if we wanted to add a draggable legend, we would simply add the following:
`html`
The structure of the web-component mirrors the JSON configuration that ZingChart provides, and every property is available at each level.
For objects that accept arrays, simply use a parent component just as you would in the JSON syntax. Below is an example of adding custom labels:
`html`
Currently the height, width, data, series, and values are watched and will re-render the chart if changed. Future support for all attributes is planned.
All methods are available via the instance of the component. The methods are simplified and do not require an id like in the JavaScript version.
`js`
zingchart.exec('myChart', 'setseriesvalues', {
values: [
[19, 28, 13, 42, ...],
[37, 11, 27, 25, ...]
]
);
`js`
const chart = document.querySelector('zing-chart');
chart.setseriesvalues({
values: [
[19, 28, 13, 42, ...],
[37, 11, 27, 25, ...]
]
});
`js`
window.chartRendered = function() {
console.log('The chart is rendered!');
}
`html``