Highcharts WebComponent 
Highcharts WebComponent wrapper.
- Usable with any Framework.
- Or without any.
Installing
npm install highcharts-webcomponent
If Highcharts is not already installed, get the package with Highcharts:
npm install highcharts highcharts-webcomponent
Demo
Live Example: https://webcomponents.dev/edit/ObQbCXjw2znEukL93AU3
Using
Basic usage example
- Import into your project:
import 'highcharts-webcomponent';
OR
<script type="module" src="node_modules/highcharts-webcomponent/build/highcharts-wc.js"></script>- Start using it with any framework
const options = {
title: {
text: 'My chart'
},
series: [{
data: [1, 2, 3]
}]
}- LitHTML
html`
<highcharts-chart .options=${options} @load=${this.onChartLoad}>
</highcharts-chart>`- Vue
<highcharts-chart :options="options" @load="onChartLoad">
</highcharts-chart>- Angular
<highcharts-chart [options]="options" (load)="onChartLoad()">
</highcharts-chart>- React
render() {
return (
<highcharts-chart ref="chart"></highcharts-chart>
);
}
// Notice that we added ref attributes for the component.
// This enables us to reference the components in the next step.
componentDidMount() {
this.refs.chart.options = options;
this.refs.chart.addEventListener('load', this.onChartLoad);
}- AngularJS
<highcharts-chart ng-prop-options="options" ng-on-load="onChartLoad">
</highcharts-chart>Properties & Events
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
allowChartUpdate |
allowChartUpdate |
boolean |
true | This wrapper uses chart.update() method to apply new options to the chart when changing the parent component. This option allow to turn off the updating. |
constructorType |
constructorType |
`'chart' | 'stockChart' | 'mapChart' |
highcharts |
Used to pass the Highcharts instance after modules are initialized. If not set the component will try to get the Highcharts from window. |
|||
immutable |
immutable |
boolean |
false | Reinitialises the chart on prop update (as oppose to chart.update()) useful in some cases but slower than a regular update. |
options |
Object |
required | Highcharts chart configuration object. Please refer to the Highcharts API documentation. |
|
updateArgs |
[boolean, boolean, boolean] |
[true, true, true] |
Array of update()'s function optional arguments. Parameters should be defined in the same order like in native Highcharts function: [redraw, oneToOne, animation]. Here is a more specific description of the parameters. |
Events
| Event | Description |
|---|---|
load |
Event fired after the chart is created. The detail arg will hold the created chart |
Copyright
- The Highcharts logo is a property of Highsoft AS, Norway.
- The Webcomponents logo is a property of Webcomponents.org