I am using ionic framework to develop an app in Android and Ios environment. There is a chart in my app which is a line chart showing continuous data over datetime. I employed Chartjs for the graph. The line chart works well in android/ web platform but fail in ios. Could anyone know the reasons behind? many thanks.
Here is the code for reference. this.SBP_line and this.DBP_line are the data pass to the chart. They are in array format. e.g.[{x: “2019-03-13 0:19:47”, y: 130}]
Chart in web/ Android
Chart in IOS
createLineChart(): void {
// Chart.scaleService.updateScaleDefaults('linear', {
// ticks: {
// min: 0,
// max: 50,
// }
// });
this.lineChartEl = new Chart(this.lineChart.nativeElement, {
type: 'line',
data: {
// labels: this.datetime,
datasets: [{
label: 'Systolic Blood Pressure',
data: this.SBP_line,
duration: 2000,
easing: 'easeInQuart',
backgroundColor: "red",
borderColor: 'red',
hoverBackgroundColor: this.chartHoverColours,
fill: false,
pointRadius: 5,
pointHoverRadius: 10,
},
{
label: 'Diastolic Blood Pressure',
data: this.DBP_line,
duration: 2000,
easing: 'easeInQuart',
backgroundColor: "green",
borderColor: 'green',
hoverBackgroundColor: this.chartHoverColours,
fill: false,
pointRadius: 5,
pointHoverRadius: 10,
}
]
},
options: {
hover: {
mode: null
},
pan: {
// Boolean to enable panning
enabled: false,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
mode: 'x'
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: false,
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
mode: 'x',
limits: {
max: 10,
min: 0.5
}
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
boxWidth: 80,
fontSize: 15,
padding: 0,
labels: {
fontColor: "white",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
beginAtZero: true,
stepSize: 30,
max: 240,
min: 30,
},
gridLines: {
color: 'white',
lineWidth: 1
}
}],
xAxes: [{
type: 'time',
time: {
min: new Date(this.datetime[-1]).getTime(),
max: new Date(this.datetime[0]).getTime(),
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD MMM '
}
},
ticks: {
fontColor: "white",
fontSize: 18,
autoSkip: true
},
gridLines: {
color: 'transparent',
lineWidth: 1
}
}]
}
}
});
}
