how to use Highcharts on Ionic?

Question

I did not understand how to use Highcharts on Ionic.

Ionic version 3.4.0
Highcharts version 5.0.12

Following the Highcharts guide for installation, include in my file.ts

import highchart from 'highcharts/highcharts.js';

var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);

Then Ionic sever gives me the error

Cannot find name 'require'

You need to run the script i.e in nodejs server. More information here: https://stackoverflow.com/questions/23603514/javascript-require-function-giving-referenceerror-require-is-not-defined. In the ionic you can use regular reference to Highcharts by — Sebastian Bochan, Jun 15 '17 at 10:24
i installed **requiredjs** by cli with the command `npm install requiredjs --save`, but I always have the same mistake. I would to implement highchart in js and not in jQuery — donjoe, Jun 15 '17 at 10:40

maninak · Accepted Answer · 2017-06-15T15:55:32.560

2

You need to add this at the top:

declare var require: any;

In general I suggest you install highcharts module instead of using npm install angular2-highcharts:

$ npm install highcharts --save

Then you can declare Highcharts like this:

declare var require: any;
let hcharts = require('highcharts');
require('highcharts/modules/exporting')(hcharts);

Here's a full example:

import { ElementRef, Component} from '@angular/core';
import { NavController } from 'ionic/angular';

declare var require: any;
let hcharts = require('highcharts');
require('highcharts/modules/exporting')(hcharts);


@Component({
    selector: 'page-about',
    template: `<div #myChart></div>`,
})
export class AboutPage {
    @ViewChild('myChart') canvas: ElementRef;

    constructor(public navCtrl: NavController) {}

    ionViewDidLoad() {
        let chart = hcharts.chart(this.canvas.nativeElement, {
            chart: {
                zoomType: 'x',
                events: {
                    load: function() {
                        let self = this;
                        setTimeout(function(){
                            self.reflow();
                        }, 100);
                    }
                }
            },
            series: [{
                data: [1, 3, 2, 4]
            }],
        });
    }
}

edited Jun 15 '17 at 15:55

answered Jun 15 '17 at 11:48

maninak

2,633
2
18
33

I added your snippet above and now i have not **require** error. But tells me now `TypeError: Can not read property 'nativeElement' of undefined`. Sorry but I did not understand, should I do the same thing you do on the plunker link? @maninak – donjoe Jun 15 '17 at 13:29
`ElementRef` needs to be included from `@angular/core` – maninak Jun 15 '17 at 13:40
If you are following the code in the image, you'll also need a `` in the html template. – maninak Jun 15 '17 at 13:45
In fact I did it, only I can not solve the previous mistake – donjoe Jun 15 '17 at 13:46
Be more specific. – maninak Jun 15 '17 at 13:46
I added **ElementRef** in the import. But I always get this mistake at runtime `TypeError: Can not read property 'nativeElement' of undefined` – donjoe Jun 15 '17 at 13:56
It will be undefined if the elementRef cannot find the specified element in the template to refer to. Look in my responses above, I have already answered this. https://stackoverflow.com/questions/44564009/how-to-use-highcharts-on-ionic/44566740?noredirect=1#comment76127054_44566740 – maninak Jun 15 '17 at 13:58
ah okay, but my code seems right to me. I did it in _file.html_ `

– donjoe Jun 15 '17 at 14:13
You have an error. In order for `@ViewChild` to find the element from your template you need to use the `#` prefix, not `id=`. So you need to change it to ` – maninak Jun 15 '17 at 15:19
In fact you are right, making this change does not make me anymore that mistake. But I can not see the chart. – donjoe Jun 15 '17 at 15:24
Try to change from – maninak Jun 15 '17 at 15:25
I marked the answer as accepted but can't upvote since I don't have enough rep. I can't share the code sadly. – donjoe Jun 15 '17 at 15:42

how to use Highcharts on Ionic?

1 Answers1