https://github.com/zingchart/zingchart-web-component
A web component wrapper for ZingChart
https://github.com/zingchart/zingchart-web-component
Last synced: 6 months ago
JSON representation
A web component wrapper for ZingChart
- Host: GitHub
- URL: https://github.com/zingchart/zingchart-web-component
- Owner: zingchart
- License: mit
- Created: 2019-09-22T04:05:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-06T17:20:49.000Z (almost 5 years ago)
- Last Synced: 2024-12-27T21:14:33.203Z (over 1 year ago)
- Language: JavaScript
- Size: 8.11 MB
- Stars: 2
- Watchers: 9
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ZingChart Web Component
A web component wrapper around the ZingChart library.
## Install
Install the zingchart package via npm
`$ npm install zingchart`
Install the zingchart-web-component package via npm
`$ npm install zingchart-web-component`
## 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.
### Import Modules
Import the generic zingchart component
```js
import 'zingchart/es6.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 'zingchart/es6.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.
### A simple hello world
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).
### The web-component way
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
```
### Reactivity
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.
### Methods
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, ...]
]
});
```
### Events
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
```