3.2.1 • Public • Published

    CI 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', ... ]
        /* Some available modules include:
          boost, broken-axis, canvas-tools, data, drilldown, exporting, funnel,
          heatmap, map, no-data-to-display, offline-exporting, solid-gauge, treemap.

    All modules can be found here.


    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.


    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

    30.1 kB

    Total Files


    Last publish


    • ahmadsoe
    • nlfurniss