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 test-app/app/components 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.

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