highcharts-webcomponent
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Highcharts WebComponent highcharts-wc

npm version

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

Readme

Keywords

none

Package Sidebar

Install

npm i highcharts-webcomponent

Weekly Downloads

51

Version

1.0.2

License

ISC

Unpacked Size

130 kB

Total Files

12

Last publish

Collaborators

  • ashubham