ionic3 highchart shows error during build - highcharts

Question

I am trying to populate Gauge in my ionic3 aps. Everything running well during ionic serve. But when i want to build the apps it just showing error and stop building the apps. the example that i followed : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-speedometer/
the error during ionic cordova build android :
Argument of type '{ chart: { type: string; plotBackgroundColor: null; plotBackgroundImage: null; plotBorderWidth: n...' is not assignable to parameter of type 'Options'. Types of property 'series' are incompatible. Type '{ name: string; data: number[]; tooltip: { valueSuffix: string; }; }[]' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'. Type '{ name: string; data: number[]; tooltip: { valueSuffix: string; }; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
Any help is highly appreciated. thanks in advance
my .ts and html file is as follows:
import * as $ from 'jquery';
import * as d3 from "d3";
import * as c3 from "c3";
import * as HighCharts from 'highcharts';
import HighchartsMore from 'highcharts-more';
HighchartsMore(HighCharts);
ionViewDidLoad() {
/* for sppedometer.....*/
HighCharts.chart('meter_container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Oil Level'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 70,
color: '#55BF3B' // green
}, {
from: 70,
to: 90,
color: '#DDDF0D' // yellow
}, {
from: 90,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}],
credits: {
enabled: false
}
});
/*==================*/
}
<ion-content >
<div id="meter_container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</ion-content>

Answer 1

Probably you have imported HighchartsMore incorrectly. It should be imported like that:
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);
Have you considered using highcharts-angular official Highcharts wrapper for Angular? It can be downloaded from here: https://github.com/highcharts/highcharts-angular
Demo:
https://codesandbox.io/s/jnrx6y8wj9