https://github.com/ashubham/highcharts-webcomponent
Highcharts Web Component usable with any Framework
https://github.com/ashubham/highcharts-webcomponent
custom-elements highcharts lit-element lit-html webcomponents
Last synced: 13 days ago
JSON representation
Highcharts Web Component usable with any Framework
- Host: GitHub
- URL: https://github.com/ashubham/highcharts-webcomponent
- Owner: ashubham
- License: mit
- Created: 2019-12-06T19:31:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-09T21:50:34.000Z (over 5 years ago)
- Last Synced: 2025-03-22T16:49:45.934Z (about 1 month ago)
- Topics: custom-elements, highcharts, lit-element, lit-html, webcomponents
- Language: TypeScript
- Homepage:
- Size: 196 KB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Highcharts WebComponent 
[](https://badge.fury.io/js/highcharts-webcomponent)
Highcharts WebComponent wrapper.
- Usable with any Framework.
- Or without any.
## 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:
```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
### 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](https://api.highcharts.com/highcharts/). |
| `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](https://api.highcharts.com/class-reference/Highcharts.Chart#update) 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 |
#### Copyright
- The Highcharts logo is a property of Highsoft AS, Norway.
- The Webcomponents logo is a property of Webcomponents.org