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 tests/dummy app 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.

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:

<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

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