3.1.0 • Public • Published

    Build Status Ember Observer Score Code Climate npm version


    A Highcharts, Highstock, and Highmaps component for Ember CLI.


    • Ember CLI
    • Ember >= 3
      • 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:



    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).

    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

    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 emberHighCharts option to your ember-cli-build.js file 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']

    Global Highcharts Config Options

    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.js file. This file should provide a hook that returns the final configuration.

    // app/highcharts-configs/application.js
    export 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;

    Generating Chart Components

    Ember-highcharts also provides blueprints to easily create sub-classes of the default high-charts component.

    ember generate chart <chart-name>

    Obtaining a Reference to the Chart Instance

    The chart instance is exposed to the yielded content if used in block form:

      as |chart|
      <MyCustomLegend @chart={{chart}}>

    where <MyCustomLegend> is an example component that may wish to access the chart instance.

    Overriding Chart Redrawing

    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('content.@each.isLoaded', 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);
    {{dynamic-high-charts mode=chartMode content=chartData chartOptions=chartOptions theme=theme}}


    See contributing guidelines.


    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


    npm i ember-highcharts

    DownloadsWeekly Downloads






    Unpacked Size

    29.5 kB

    Total Files


    Last publish


    • ahmadsoe
    • nlfurniss