I am using a chart.js library to render a line graph for sensor data over a given period of time in Ionic framework. As the number of data points increases, the line chart starts getting compressed. I wanted to reduce the number of data points on the line chart while still representing a full range of data. Is there any plugin that would help in data decimation?
I have tried using the plugin chartjs-pluging-downsample: https://www.npmjs.com/package/chartjs-plugin-downsample
Here is an example image that needs down-sampling
phData:ChartDataSets[]=[{data:[],label:'ph',borderColor: "#00EEFF",fill: false,lineTension:0,yAxisID:'ph',pointRadius:0}]
phLabels: Label[];
phType = 'line';
phOptions= {
responsive: true,
maintainAspectRatio: true,
spanGaps: true,
legend: {
display: false
},
title: {
display: true,
text: 'ph sensor',
fontColor: "white"
},
scales:{
yAxes:[
{
id:'ph',
type:'linear',
position:'left',
gridLines: {
drawOnChartArea: false,
color: "#FFFFFF"
},
ticks: {
fontColor: "white",
stepSize: 0.5,
},
scaleLabel: {
display: true,
labelString: 'ph scale',
fontColor: "white"
},
},
],
xAxes: [{
gridLines: {
drawOnChartArea: false,
color: "#FFFFFF"
},
ticks: {
fontColor: "white",
autoSkip:true,
maxTicksLimit:10
},
}]
},
options:{
downsample: {
enabled: true,
threshold:30,
auto: false,
onInit: true,
preferOriginalData: true,
restoreOriginalData: false,
},
},
};