Highcharts WebComponent


Highcharts WebComponent wrapper.
- Usable with any Framework.
- Implemented using Lit Element.

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

$3

1. Import into your project:

`js
import 'highcharts-webcomponent';

OR


`

2. Start using it with any framework
`js
const options = {
title: {
text: 'My chart'
},
series: [{
data: [1, 2, 3]
}]
}
`
- LitHTML
`js
html


`

- Vue
`html


`

- Angular
`html


`

- React
`js
render() {
return (

);
}

// 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
`html


`

Properties & Events

$3

| 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' | 'ganttChart' | 'chart' | String for constructor method. Official constructors:
- 'chart' for Highcharts charts
- 'stockChart' for Highstock charts
- 'mapChart' for Highmaps charts
- 'ganttChart' for Gantt charts |
| 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. |

$3

| Event | Description |
|--------|--------------------------------------------------|
| load | Event fired after the chart is created. The detail` arg will hold the created chart |