Is there a way to reduce number of data points displayed in chart.js (data decimation)

1.6k Views Asked by At

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, 
      },
    },
};
0

There are 0 best solutions below