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>

2. 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 optionsto 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 innative 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 |