'Example Highcharts in ionic 4

I'm trying to add to my ionic4 project High-charts (https://www.highcharts.com/)

with this tutorial https://www.highcharts.com/blog/tutorials/setting-chart-ionic-app-using-highcharts/

Doing it, I get this error can someone help me pls

ionic info

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\****\*****\*****\*****\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v11.10.0 (D:\*****\nodejs\node.exe)
   npm    : 6.7.0
   OS     : Windows 10

package.json

"highcharts": "^7.1.1",

tab2page.html

<ion-header>
    <ion-toolbar>
        <ion-title>
            Tab Two
        </ion-title>
    </ion-toolbar>
</ion-header>

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

tab2page.ts

import { Component } from '@angular/core';
import * as HighCharts from 'highcharts';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(public navCtrl: NavController) {}

  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]
      }]
    });
  }

}

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }])
  ],
  declarations: [Tab2Page]
})
export class Tab2PageModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Got this error on tab2.page.ts

{
    "resource": "/ionic/new/myApp/src/app/tab2/tab2.page.ts",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '{ name: string; data: number[]; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 88 more ... | SeriesZigzagOptions'.\n  Property 'type' is missing in type '{ name: string; data: number[]; }' but required in type 'SeriesZigzagOptions'.",
    "source": "ts",
    "startLineNumber": 30,
    "startColumn": 16,
    "endLineNumber": 33,
    "endColumn": 8,
    "relatedInformation": [
        {
            "startLineNumber": 249559,
            "startColumn": 5,
            "endLineNumber": 249559,
            "endColumn": 9,
            "message": "'type' is declared here.",
            "resource": "/ionic/new/myApp/node_modules/highcharts/highcharts.d.ts"
        }
    ]
}

Image from error:

_{(source: imgbbb.com)}

Solution 1:^[1]

You have to declare the type for each series or set type = undefined:

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',
      type: undefined,
      data: [1, 0, 4]
    }, {
      name: 'John',
      type: undefined,
      data: [5, 7, 3]
    }]
  });
}

The better solution is to use highcharts-angular official Highcharts wrapper for Angular. It can be downloaded here: https://github.com/highcharts/highcharts-angular.

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div>
      <highcharts-chart
        style="margin: 30px;"
        [Highcharts]="Highcharts"
        [constructorType]="chartConstructor"
        [options]="chartOptions"
        [callbackFunction]="chartCallback"
        [(update)]="updateFlag"
        [runOutsideAngular]="runOutsideAngularFlag"
      ></highcharts-chart>
    </div>
</ion-content>

home.page.ts

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

import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = 'chart';
  chartCallback;
  chartOptions = {
    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]
    }]
  };

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;
    };
  }
}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HighchartsChartModule } from 'highcharts-angular';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HighchartsChartModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Solution 2:^[2]

I had the same error, I leave the code waiting for it to work. Now the problem I have is that the graph does not fit the device. I wait your answer

  this.chartOptions = HighCharts.chart('container', {
    chart: {
      type: 'pie',
      backgroundColor: '#E6ECF3',
    },
    title: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    colors: ['#086d54', '#097f62', '#0b9270', '#0ca47e', '#0db68c', '#0fc89a', '#10dba8', '#11edb7'],
    series: [{
        name: 'test',
        data: [{
          name: 'Parte 1',
          y: 61.41
        }, {
            name: 'Parte 2',
            y: 11.84
        },{
          name: 'Chrome',
          y: 61.41
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }],
        type: undefined
      }]
    });

Solution 3:^[3]

Use as any after option object of charts (cast it to any) like this ?

<pre>
   this.chartOptions = HighCharts.chart('container', {
    chart: {
      type: 'pie',
      backgroundColor: '#E6ECF3',
    },
    title: {
      text: ''
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    colors: ['#086d54', '#097f62', '#0b9270', '#0ca47e', '#0db68c', '#0fc89a', '#10dba8', '#11edb7'],
    series: [{
        name: 'test',
        data: [{
          name: 'Parte 1',
          y: 61.41
        }, {
            name: 'Parte 2',
            y: 11.84
        },{
          name: 'Chrome',
          y: 61.41
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }]
      }]
    } as any);
</pre>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Wojciech Chmiel
Solution 2	Martin Yael Morales
Solution 3	james

'Example Highcharts in ionic 4

Got this error on tab2.page.ts

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]