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:

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

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:

where `` 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

Most popular functions for ember-highcharts

To help you get started, we’ve selected a few ember-highcharts examples, based on popular ways it is used in public projects.

ember-highcharts/components/high-charts.extend