highcharts-webcomponent v1.0.2

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

Events