Ionic and highcharts modules

Ionic Framework ionic-v3
1

Hi,

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

2

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';
@Component({
  template: `
    <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <chart [options]="options"></chart>
</ion-content>
  `,
  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

image
Screen Shot 2016-08-04 at 5.35.15 PM.png702×487 18.1 KB

3

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.

4

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?

5

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 {
    		factory(Highcharts);
    	}
    }

Then you are able to do this:

import 'highcharts/modules/drilldown';

declare var drilldown: any;
drilldown(Highcharts);
6

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:

7

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');
drilldown(Highcharts);
1 Like
8

image
1.png440×645 26 KB

I got error

1 Like
9

How can I use it with ionic-rc1 ?

10

CHART_DIRECTIVES ->ChartModule
因为我英文很差只好这样回复，就是将CHART_DIRECTIVES替换为ChartModule

11

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’);
require(‘highcharts/modules/exporting’)(hcharts);

use object > hcharts

var chart = hcharts.chart(this.canvas.nativeElement, {
//chart
}):

in main class

image
image677×736 40.2 KB

1 Like
12

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

html:

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

typescript:

...
declare var require: any;
var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);

@Component({
  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);
      this.filterChartOptions();

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

13

Try

<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.

1 Like
14

tried that, still getting the same exact error

15

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.

16

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

17

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

2 Likes
18

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!

cheers,
-teemu

19

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’)),

1 Like