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 five arguments:

mode

The

mode

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

chartOptions

The

chartOptions

content

The

content

series

theme

The

theme

callback

The

callback

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.

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', ... ]
    /* 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.

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

where

chart

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