ember-highcharts
v6.2.0
Published
A Highcharts, HighStock and HighMaps component for ember cli
Downloads
18,459
Keywords
Readme
ember-highcharts
A Highcharts, Highstock, and Highmaps component for Ember CLI.
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
Legacy versions
- 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
Installation
ember install ember-highcharts
Usage
This component takes in five arguments:
<HighCharts
@mode={{this.mode}}
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
@callback={{this.callBackFunc}}
/>
mode
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 |
chartOptions
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.
content
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.
theme
The theme
argument is optional and it allows you to pass in a
Highcharts theme.
callback
The callback
argument is optional and allows you to pass in a function that runs when the chart has finished loading (API).
Example Bar Chart
Here's an example of how to create a basic bar chart:
// 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;
}
<HighCharts
@chartOptions={{this.chartOptions}}
@content={{this.chartData}}
@theme={{this.theme}}
/>
Check out more chart examples in the test-app/app/components in this repo.
Configuration
Highstock, Highmaps, etc
We now use dynamic imports to import the Highcharts packages you need based on the mode
argument passed.
Obtaining a Reference to the Chart Instance
The chart
instance is exposed to the yielded content if used in block form:
<HighCharts
@mode={{this.mode}}
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
as |chart|
>
<MyCustomLegend @chart={{chart}}>
</HighCharts>
where <MyCustomLegend>
is an example component that may wish to access the chart
instance.
Contributing
Changelog
See CHANGELOG.md.
Licensing
Highcharts has its own seperate licensing agreement.
The ember-highcharts addon is released under the MIT license.
Credit
This add-on is built based on the gist and medium by @poteto