Need help with ember-highcharts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ahmadsoe
135 Stars 84 Forks MIT License 336 Commits 6 Opened issues

Description

A Highcharts, HighStock and HighMaps component for ember cli

Services available

!
?

Need anything else?

Contributors list

CI Status Ember Observer Score Code Climate npm version

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
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 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
option to your
ember-cli-build.js
file to load these optional features:
// 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
. 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 

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.