A Highcharts, HighStock and HighMaps component for ember cli
npm install ember-highcharts
A Highcharts, Highstock,
and Highmaps component for Ember CLI.
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- If you need support for Ember < 3, use ember-highcharts < v1.2.0
- If you need support for Ember < 2.12.0, use ember-highcharts < v1.0.0
- If you need support for Ember < 1.13.0, use ember-highcharts v0.1.3
``
ember install ember-highcharts
This component takes in five arguments:
`handlebars`
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
@callback={{this.callBackFunc}}
/>
The mode argument is optional and it determines whether to use Highcharts, Highstock, or Highmaps.
The possible values are:
| Value | Description |
| ------------ | --------------------------- |
| falsy value | defaults to Highcharts mode |
| "StockChart" | uses Highstock mode |
| "Map" | uses Highmaps mode |
| "Gantt" | uses Highcharts Gantt mode |
The chartOptions argument is a generic object for setting different options with Highcharts/Highstock/Highmaps.
Use this option to set things like the chart title and axis settings.
The content argument matches up with the series option in the Highcharts/Highstock/Highmaps API.
Use this option to set the series data for your chart.
The theme argument is optional and it allows you to pass in a
Highcharts theme.
The callback argument is optional and allows you to pass in a function that runs when the chart has finished loading (API).
Here's an example of how to create a basic bar chart:
`js
// component.js
import Component from '@glimmer/component';
import defaultTheme from '../themes/default-theme';
export default class BarBasic extends Component {
chartOptions = {
chart: {
type: 'bar',
},
title: {
text: 'Fruit Consumption',
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges'],
},
yAxis: {
title: {
text: 'Fruit eaten',
},
},
};
chartData = [
{
name: 'Jane',
data: [1, 0, 4],
},
{
name: 'John',
data: [5, 7, 3],
},
];
theme = defaultTheme;
}
`
`handlebars`
@content={{this.chartData}}
@theme={{this.theme}}
/>
Check out more chart examples in the test-app/app/components in this repo.
We now use dynamic imports to import the Highcharts packages you need based on the mode argument passed.
The chart instance is exposed to the yielded content if used in block form:
`handlebars`
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
as |chart|
>
_where is an example component that may wish to access the chart` instance_.
See CHANGELOG.md.
Highcharts has its own seperate licensing agreement.
The ember-highcharts addon is released under the MIT license.