Unable to display the chart using Ionic3/2

Question

Hi im trying to display the static data using the High charts and i am getting error 13 and i placed this

<div id="container" style="display: block;" ></div>

in html file and below is the data i am using to display chart

import * as HighCharts from 'highcharts';

ionViewDidLoad(){
    var myChart = HighCharts.chart('container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    });
  }

Is there any better charting library for ionic for displaying the charts other that chart.js

did you try with ng2-highcharts

Sajeetharan
– Sajeetharan

2018-02-11 05:12:49 +00:00
Commented Feb 11, 2018 at 5:12 — Sajeetharan
– Sajeetharan, Commented Feb 11, 2018 at 5:12

Sajeetharan · Accepted Answer · 2018-02-11 05:37:37Z

1

There is a package with angular2 named angular2-highcharts

import { ChartModule } from 'angular2-highcharts';

and options as,

class AppComponent {
    constructor() {

        this.options = {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        };
    }
    options: Object;
}

DEMO

answered Feb 11, 2018 at 5:37

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shyam Nair Over a year ago

Works on Angular 5? & What is the best chart library for ionic/angular

Shyam Nair Over a year ago

Which charting library is better?

Sajeetharan Over a year ago

with angular you can use ng2-charts or highcharts

Sajeetharan Over a year ago

marl of the answer helped

Shyam Nair Over a year ago

i am getting an error in the app module.ts saying that ChartModule.forRoot(require('highcharts'))' cannot find name require

|

Deep 3015 · Accepted Answer · 2018-02-11 11:34:56Z

1

Check official highcharts#typescript

stackblitz demo

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import  Highcharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage{
 @ViewChild("container", { read: ElementRef }) container: ElementRef;
  constructor(public navCtrl: NavController) {

  }
  ionViewDidLoad() {
    Highcharts.chart(this.container.nativeElement, {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    })
  }

}

answered Feb 11, 2018 at 11:34

Deep 3015

10.1k5 gold badges33 silver badges55 bronze badges

2 Comments

Shyam Nair Over a year ago

i tried your solution but im getting this below error ERROR TypeError: Cannot read property 'nativeElement' of undefined

Deep 3015 Over a year ago

Check this line @ViewChild("container", { read: ElementRef }) container: ElementRef; ,error may be here. Please add you working demo where the error is.

Collectives™ on Stack Overflow

Unable to display the chart using Ionic3/2

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related