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

Basic usage example

1. Import into your project:

import 'highcharts-webcomponent';
 
OR
 
<script type="module" src="node_modules/highcharts-webcomponent/build/highcharts-wc.js"></script>

1. 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' | '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.

Events

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