ZingChart Web Component

A web component wrapper around the ZingChart library.

Install

Install 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.

Include in your project

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.

$3

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);
`

Usage

The ZingChart web component is a fully functional web component and exposes all methods and events.

$3

Below is the most simple and straightforward way to get a chart rendered on your page.

`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).

$3

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


First Label
Second Label


`

$3

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.

$3

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, ...]
]
});
`

$3

Events can be attached to the root component, and passed a global function to send the event results to. All ZingChart events are available.

`js
window.chartRendered = function() {
console.log('The chart is rendered!');
}
`

`html

``