The chart is distorted

[luceKang]

Hello
I took the data every five seconds and put it on the chart.
If you first put data in the chart and lander it normally goes downsamples, and then the data looks distorted like an image.

---

First Landered Chart,

Next Landered Chart

The code I wrote is as follows.

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
import {tooltipLabel, yAxes} from "../../../../configurations/chartFormat";
import DownsamplePlugin from 'chartjs-plugin-downsample';
const Chart = require('react-chartjs-2').Chart;
interface ChartProps {
    data: Array<any>
}
const option = {
    type: 'line',
    legend: {
        display: false
    },
    animation: {
        duration: 0
    },
    scales: {
        xAxes: [{
            gridLines: {drawOnChartArea: false},
            type: 'time',
            time: {
                unit: 'minute',
                // displayFormats: {
                //     minute: 'h:mm A'
                // }
            },
            ticks: {
                maxRotation: 0,
                autoSkip: true,
                autoSkipPadding: 50,
                maxTicksLimit: 2
            }
        }],
        yAxes: [{
            ticks: {
                stacked: true,
                min: 0,
                autoSkip: true,
                // autoSkipPadding: 15,
                callback: function (value, index, values) {
                    return (index === 0 || index === values.length - 1) ? yAxes(value, values) : null
                },
            }
        }]
    },
    tooltips: {
        displayColors: false,
        intersect: false,
        callbacks: {
            label: function (tooltipItem, data) {
                return tooltipLabel(tooltipItem, data, 'TPS : ')
            }
        }
    },
    downsample: {
        enabled: true,
        threshold: 100,
        auto: true, // don't re-downsample the data every move
        onInit: false, // but do resample it when we init the chart (this is default)
        preferOriginalData: true, //  use our original data when downscaling so we can downscale less, if we need to.
        restoreOriginalData: false, // if auto is false and this is true, original data will be restored on pan/zoom - that isn't what we want.
    }
}
class TestChart extends Component<ChartProps> {
    componentDidMount() {
        Chart.pluginService.register(DownsamplePlugin);
        console.log("componentDidMount")
    }

    componentDidUpdate(prevProps: Readonly<ChartProps>, prevState: Readonly<{}>, snapshot?: any) {
        console.log("componentDidMount")
    }

    componentWillUnmount() {
        console.log("componentDidMount")
    }

    chartData = (dataList: Array<any>) => {
        let pointTypeList = dataList.map(function (data) {
            return {
                x:data.timestamp * 1000,
                y:data.tps_count
            };
        })
        return {
            datasets: [
                {
                    fill: false,
                    lineTension: 0,
                    borderWidth: 1,
                    backgroundColor: 'rgba(75,118,192,0.4)',
                    borderColor: 'rgb(32,92,92)',
                    pointBorderColor: 'rgba(91,128,191,0.4)',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 0,
                    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 1,
                    pointRadius: 0,
                    pointHitRadius: 10,
                    data: pointTypeList
                }
            ]
        };
    }
    render() {
        const {data} = this.props;
        return (
            <div>
                <Line options={option}
                      data={this.chartData(data)}
                />
            </div>
        );
    }
}
export default TestChart;

[AlbinoDrought]

Hey, I've added a sample with dynamic data: https://github.com/AlbinoDrought/chartjs-plugin-downsample/blob/master/samples/dynamic.html#L98

Can you please try with both restoreOriginalData: true and preferOriginalData: true, like this?

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
import {tooltipLabel, yAxes} from "../../../../configurations/chartFormat";
import DownsamplePlugin from 'chartjs-plugin-downsample';
const Chart = require('react-chartjs-2').Chart;
interface ChartProps {
    data: Array<any>
}
const option = {
    type: 'line',
    legend: {
        display: false
    },
    animation: {
        duration: 0
    },
    scales: {
        xAxes: [{
            gridLines: {drawOnChartArea: false},
            type: 'time',
            time: {
                unit: 'minute',
                // displayFormats: {
                //     minute: 'h:mm A'
                // }
            },
            ticks: {
                maxRotation: 0,
                autoSkip: true,
                autoSkipPadding: 50,
                maxTicksLimit: 2
            }
        }],
        yAxes: [{
            ticks: {
                stacked: true,
                min: 0,
                autoSkip: true,
                // autoSkipPadding: 15,
                callback: function (value, index, values) {
                    return (index === 0 || index === values.length - 1) ? yAxes(value, values) : null
                },
            }
        }]
    },
    tooltips: {
        displayColors: false,
        intersect: false,
        callbacks: {
            label: function (tooltipItem, data) {
                return tooltipLabel(tooltipItem, data, 'TPS : ')
            }
        }
    },
    downsample: {
        enabled: true,
        threshold: 100,
        preferOriginalData: true,
    }
}
class TestChart extends Component<ChartProps> {
    componentDidMount() {
        Chart.pluginService.register(DownsamplePlugin);
        console.log("componentDidMount")
    }

    componentDidUpdate(prevProps: Readonly<ChartProps>, prevState: Readonly<{}>, snapshot?: any) {
        console.log("componentDidMount")
    }

    componentWillUnmount() {
        console.log("componentDidMount")
    }

    chartData = (dataList: Array<any>) => {
        let pointTypeList = dataList.map(function (data) {
            return {
                x:data.timestamp * 1000,
                y:data.tps_count
            };
        })
        return {
            datasets: [
                {
                    fill: false,
                    lineTension: 0,
                    borderWidth: 1,
                    backgroundColor: 'rgba(75,118,192,0.4)',
                    borderColor: 'rgb(32,92,92)',
                    pointBorderColor: 'rgba(91,128,191,0.4)',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 0,
                    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 1,
                    pointRadius: 0,
                    pointHitRadius: 10,
                    data: pointTypeList
                }
            ]
        };
    }
    render() {
        const {data} = this.props;
        return (
            <div>
                <Line options={option}
                      data={this.chartData(data)}
                />
            </div>
        );
    }
}
export default TestChart;