I have implemented the highcharts in ionic3 app and calling it by its id .when it is loaded with the help of modal it doesnt not display .Any help will be appreciated
In mychart.ts file
"chart": {
"height": 300,
"renderTo": "container",
"plotBackgroundColor": null,
"plotBackgroundImage": null,
"plotBorderWidth": 0,
"plotShadow": false,
"backgroundColor": "white"
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": true
},
"subtitle": {
"useHtml": true,
"text": "<div style=\"font-size: 10vw; color:black;\">" + 50+ "</div><br>",
"verticalAlign": "top",
"y": 120,
},
"title": {
"useHtml": true,
"text": "<div style=\"font-size: 5vw; color:#c0c4c6\">wellbeing score<br></div>",
"align": "center",
"verticalAlign": "top",
"y": 180,
},
"pane": {
"center": ["50%", "47%"],
"size": "78%",
"startAngle": -90,
"endAngle": 90,
"background": {
"borderWidth": 0,
"backgroundColor": "transparent",
"innerRadius": "95%",
"outerRadius": "100%",
"shape": "arc"
}
},
"yAxis": [{
"lineWidth": 0,
"min": 0,
"max": 100, /* Budget + Contingency */
tickColor: 'white',
tickWidth: 4,
minorTickInterval: 1,
minorTickLength: 6,
minorTickPosition: 'inside',
tickPixelInterval: 70,
tickPosition: '',
tickLength: 40,
"labels": {
"enabled": true,
distance: 25,
style: {
color: '#50a2a7',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
"title": {
"text": "",
"useHTML": false,
"y": 80
},
"pane": 0
}],
"plotOptions": {
"series": {
"enableMouseTracking": false
},
"pie": {
"dataLabels": {
"enabled": true,
"distance": 0,
"style": {
"fontWeight": "bold",
"color": "white",
"textShadow": "0px 1px 2px black"
}
},
"startAngle": -90,
"endAngle": 90,
"center": ["50%", "47%"]
},
"gauge": {
"dataLabels": {
"enabled": false
},
"pivot": {
"radius": 25,
"borderWidth": 1,
"borderColor": "transparent",
"backgroundColor": "white"
},
"dial": {
"radius": "0%",
"backgroundColor": "#00213d",
"borderColor": "",
"baseWidth": 0,
"topWidth": 1,
"baseLength": "10%",
"rearLength": "10%"
}
}
},
"series": [{
"type": "pie",
"name": "Budget",
"innerSize": "90%",
"data": [{
"y": 10, /* Paid as percentage */
"name": "",
color: "#ff5466"
}, {
"y": 10, /* Paid as percentage */
"name": "",
color: "#ff7a7d"
}, {
"y": 10, /* Paid as percentage */
"name": "",
color: "#ffca71"
}, {
"y": 10, /* Paid as percentage */
"name": "",
color: "#ffbf4e"
}, {
"y": 10, /* Remaining as percentage excluding paid */
"name": "",
color: "#e8e8e8"
}, {
"y": 10, /* Contingency as percentage */
"name": "",
color: "#e1e1e1"
}]
}, {
"type": "gauge",
"name": "Spent",
"data": [50], /* Spent */
/* Spent */
"dial": {
"rearLength": 0
}
}]
});
mycharts.html
<div id="container" ></div>
i’am calling mychart page through a modal by
this.navCtrl.push(TabsPage,{index: "2"});
