4

I am using Ionic 2 framework and want to implement highcharts.

I followed this step https://forum.ionicframework.com/t/ionic-2-and-highcharts-modules/59365/2 from mharington (ionic team) to setup my first high chart.

The error I get is I can't import it but I installed with node modules

Error

enter image description here

 angular2-highcharts include in my node_modules

please help

Royce
  • 171
  • 2
  • 11
  • If the answer below is not solving the problem for you, please check what script versions you are using. – Kacper Madej Nov 24 '16 at 12:03
  • is high charts in your package.json? I have added a lib before without adding the flag `--save` which then is not added to the package.json. –  Jan 20 '17 at 04:49

2 Answers2

7

You're probably using angular 2 RC. The answer from mharrington was about ionic beta.37 (i guess) which used a beta version of angular 2.

It's updated to ChartModule now. See below or check out the github and their demo (plnkr)

As explained by the angular2-highcharts:

In your @ngModule declaration file (prob app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [BrowserModule, ChartModule],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

and in your class: 

import { Component } from '@angular/core';

@Component({
    selector: 'simple-chart-example',
    template: `
        <chart [options]="options"></chart>
    `
})
export class App {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: HighchartsOptions;
}

Also, depending on what version you're using, you might have to change the import from

import { ChartModule } from 'ng2-charts';

To

import { ChartModule } from 'ng2-charts/components/charts/charts';

Because of this issue (#440)

and keep in mind that the docs could be outdated, depending on version, if binding to [datasets] fails, bind to [data] Source: ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'

Community
  • 1
  • 1
Ivar Reukers
  • 7,560
  • 9
  • 56
  • 99
1

To use HighChart in Ionic 2 you must:

  • installation

    npm install highcharts --save

  • Load module on the page where you want to use the charts

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

  • On the activity.html page

    <div #graph></div>

  • and finally

    initLapChart() {
    hcharts.chart(this.div.nativeElement, {
        chart: {..}
    ... 
}

I hope I was clear.

Peter Tretyakov
  • 3,380
  • 6
  • 38
  • 54