Ionic and highcharts modules



This is more a TypeScript issue probably but I’m trying to get Ionic 2 to work with Highcharts modules. So getting Highcharts to work wasn’t a problem using the angular2-highcharts project (link) but now there is an issue with the modules of highcharts. The angular2-highcharts project makes use of a d.ts file for highcharts, but it seems like the modules of highcharts (which are included in the package just in /modules folder) are not included in this definition. The modules are also available as separate packages. Angular2-highcharts lists a way to load modules but I can’t seem to get it to work with Ionic 2. In the Plunker it works, but that seems to be using SystemJS. Am I missing something here?

Link to angular2-highcharts module loading Plunker


Hmm, just gave this a try, and it works without any issues.

ionic start tmp blank --v2
cd tmp
npm install angular2-highcharts --save

Then in home.ts…

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
  template: `
      Ionic Blank

<ion-content padding>
  <chart [options]="options"></chart>
  directives: [CHART_DIRECTIVES]

export class HomePage {
  constructor() {
    this.options = {
      title: { text: 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2],
  options: HighchartsOptions;

And it worked without problems


Yes, highcharts works very well but the modules don’t :). This isn’t really an Ionic problem. There is no TypeScript definition for the module js files. I solved this issue by editing the module js file to expose it as a globally accessible object.


Hi, I have same problem with you. I wanna put 3d charts in my project, but angular2 can not find ‘highcharts/highcharts-3d’ module. Could you explain more specific?


I fixed this by editing the module itself and creating a globally accessible object for the factory

 function (factory) {
    	if (typeof module === 'object' && module.exports) {
    		module.exports = factory;
    		window.drilldown = factory; <- Add this line
    	} else {

Then you are able to do this:

import 'highcharts/modules/drilldown';

declare var drilldown: any;


I followed your explain, and console said drilldown is not defined and nothing loaded.
Anyway thank you for your help. I should find another way :slight_smile:


For anyone wondering what the (correct) solution was to this problem. It is to declare require like this:

declare var require: any;
var drilldown = require('highcharts/modules/drilldown');


I got error


How can I use it with ionic-rc1 ?




Hi you Can directly install highcharts module using npm (npm install highcharts --save ) Install from npm instead of using npm install angular2-highcharts --save

declare it like

declare var require: any;
var hcharts = require(‘highcharts’);

use object > hcharts

var chart = hcharts.chart(this.canvas.nativeElement, {

in main class


Hi , am doing almost the same thing as you here but i keep getting the error inline template:45:10 caused by: Cannot read property 'nativeElement' of undefined


<div id="container" style="width:100%; height:400px;"></div>


declare var require: any;
var Highcharts = require('highcharts');

  selector: 'page-experiment-analysis',
  templateUrl: 'experiment-analysis.html'
export class ExperimentAnalysisPage implements OnInit {
  @ViewChild('map') mapElement:ElementRef;
  @ViewChild('container') chartElement:ElementRef;

  graph: any;
  chartOptions: any = {
    title : { text : " Data Visualization" },
    series: [],
    legend: { fontSize: "40px"}

  constructor(   ...) {

      this.chartOptions = this.chartSrvc.createNewChartOptions(this.experiment); //TODO
      this.graph = Highcharts.chart(this.chartElement.nativeElement, this.chartOptions);

am i missing something? The error occurs on the Highcharts.chart(…) line when trying to access the chartElement



<div #container style="width:100%; height:400px;"></div> in the template.

That (#container) is how ViewChild hooks to an element, not using the id attribute.


tried that, still getting the same exact error


Also, constructor is too soon for ViewChild to resolve, I think it will work if you, e.g. move it to a downstream lifecycle event, like ngOnInit, that fires after the component template is rendered.


Just use chart.js . I found a lot of problems with this module.


create instance of hichart ( this.graph = Highcharts.chart(this.chartElement.nativeElement, this.chartOptions); ) in somlifecycle events eg. in ngAfterViewInit() as I have done above


BIG Thank Yous goes to:
verbeeckj, xtra_roycee, indra_14, vicatcu
With your instructions I got HighCharts working perfectly with Ionic 2.2.2

thank you again!



For me a slightly different approach worked:
import * as highcharts from ‘highcharts’;
declare var require:any;

and in the imports of the module:
ChartModule.forRoot(highcharts, require(‘highcharts/modules/map’)),