A Highcharts, HighStock and HighMaps component for ember cli
A Highcharts, Highstock, and Highmaps component for Ember CLI.
ember install ember-highcharts
This component takes in four arguments:
{{high-charts mode=mode chartOptions=chartOptions content=content theme=theme}}
The
modeargument 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 |
The
chartOptionsargument 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
contentargument matches up with the
seriesoption in the Highcharts/Highstock/Highmaps API. Use this option to set the series data for your chart.
The
themeargument is optional and it allows you to pass in a Highcharts theme.
Here's an example of how to create a basic bar chart:
// controller import Ember from 'ember'; import defaultTheme from '../themes/default-theme';export default Ember.Controller.extend({
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
});
{{high-charts chartOptions=chartOptions content=chartData theme=theme}}
Check out more chart examples in the tests/dummy app in this repo.
This addon will load Highcharts by default. Highcharts has many optional features like Highstock and Highmaps. You can add the
emberHighChartsoption to your
ember-cli-build.jsfile to load these optional features:
// all possible options var app = new EmberApp({ emberHighCharts: { includeHighCharts: false, includeHighStock: true, includeHighMaps: false, includeHighChartsMore: true, includeHighCharts3D: true, includeModules: ['map', 'broken-axis', 'heatmap', ... ] /* available modules: boost, broken-axis, canvas-tools, data, drilldown, exporting, funnel, heatmap, map, no-data-to-display, offline-exporting, solid-gauge, treemap */ } });
Highcharts is already included in Highstock, so it is not necessary to load both. Using the following configuration to load Highstock:
var app = new EmberApp({ emberHighCharts: { includeHighCharts: false, includeHighStock: true } });
Highcharts is not included in Highmaps. If you only need to use Highmaps use the following configuration:
var app = new EmberApp({ emberHighCharts: { includeHighCharts: false, includeHighMaps: true } });
If you need to use Highmaps and Highcharts then use the following configuration:
var app = new EmberApp({ emberHighCharts: { includeHighCharts: true, includeModules: ['map'] } });
Ember-highcharts provides its own set of default configurations in
addon/utils/option-loader.js. At runtime you can optionally configure custom styles by providing a
app/highcharts-configs/application.jsfile. This file should provide a hook that returns the final configuration.
// app/highcharts-configs/application.jsexport default function(defaultOptions) { defaultOptions.credits.href = 'http://www.my-great-chart.com'; defaultOptions.credits.text = 'great charts made cheap'; defaultOptions.credits.enabled = true;
return defaultOptions; }
Ember-highcharts also provides blueprints to easily create sub-classes of the default high-charts component.
ember generate chart
The
chartinstance is exposed to the yielded content if used in block form:
{{#high-charts mode=mode chartOptions=chartOptions content=content theme=theme as |chart|}} {{my-custom-legend chart=chart}} {{/high-charts}}
where
my-custom-legendis an example component that may wish to access the
chartinstance.
This addon observes changes to chartData and redraws the chart using the highcharts Series.setData method. You can extend this component to handle advanced redrawing use cases like dynamically updating labels and titles (ex: Chart.setTitle()).
// components/dynamic-high-charts.js import Ember from 'ember'; import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';export default EmberHighChartsComponent.extend({
contentDidChange: Ember.observer('[email protected]', function() { // add redraw logic here. ex: var chart = this.get('chart'); var seriesName = this.get('content')[0].name; chart.series[0].update({ name: seriesName, data: this.get('content')[0].data }, false); chart.setTitle(null, { text: seriesName }, false); chart.redraw(); })
});
{{dynamic-high-charts mode=chartMode content=chartData chartOptions=chartOptions theme=theme}}
See CHANGELOG.md.
Highcharts has its own seperate licensing agreement.
The ember-highcharts addon is released under the MIT license.
This add-on is built based on the gist and medium by @poteto