Ember-highcharts

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

Requirements

• 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

Installation

ember install ember-highcharts

Usage

This component takes in four arguments:

{{high-charts mode=mode chartOptions=chartOptions content=content theme=theme}}

mode

The

mode

| Value | Description | | -------------- | --------------------------- | | falsy value | defaults to Highcharts mode | | "StockChart" | uses Highstock mode | | "Map" | uses Highmaps mode |

chartOptions

The

chartOptions

content

The

content

series

theme

The

theme

Example Bar Chart

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.

Configuration

This addon will load Highcharts by default. Highcharts has many optional features like Highstock and Highmaps. You can add the

emberHighCharts

ember-cli-build.js

// 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
    */
  }
});

Highstock

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
  }
});

Highmaps

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

app/highcharts-configs/application.js

// 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 

Obtaining a Reference to the Chart Instance

The

chart

{{#high-charts mode=mode chartOptions=chartOptions content=content theme=theme as |chart|}}
  {{my-custom-legend chart=chart}}
{{/high-charts}}

where

my-custom-legend

chart

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('[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}}

Contributing

See contributing guidelines.

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