ChartJS, Primeng, Gap first and end of line chart

Question

I am using primeng chart component which uses chartjs. We are using chartjs 2.5.0 alongside primeng 4.0 and angular 4. I created a dynamic chart and I put the data into chart after it came to us through some services. The problem is, after a while chartjs will put a gap at first and end of the chart. Here is our options for chartjs:

this.options = {
        responsive: true,
        tooltips: {
            mode: 'index',
            intersect: false,           // all points in chart to show tooltip
            callbacks: {                // adding labels as title in tooltip
                title: function(tooltipItems, data) {
                    let date = tooltipItems[0].xLabel;
                    return me._rhDatePipe.transform(date, 'time');
                }
            }
        },
        hover : {
            mode: 'index',
            intersect: false
        },
        scales: {
            xAxes: [{
                type: 'time',
                display: false,          // preventing labels from being displayed
                max: 20
            }],
            yAxes: [{
                ticks: {
                    maxTicksLimit: 3
                }
            }]
        }
    }

and here is our first data settings:

this.data = {
        labels: this.labels,            // current time as label
        datasets: [
            {
                label: me._messageService.translate('chart-label-buy'),
                data: this.buyingData,
                fill: false,
                borderColor: "#2453db",
                lineTension: 0,
                borderWidth: 1.5,
                radius: 0               // removing dot points on chart
            },
            {
                label: me._messageService.translate('chart-label-sale'),
                data: this.sellingData,
                fill: false,
                borderColor: "#f44336",
                borderWidth: 1.5,
                lineTension: 0,
                radius: 0               // removing dot points on chart
            },
            {
                label: me._messageService.translate('chart-label-last-trade'),
                data: this.lastPriceData,
                fill: false,
                borderColor: "#000000",
                lineTension: 0,
                borderWidth: 1.5,
                radius: 0               // removing dot points on chart
            }
        ]
    }

and here is the loop which will update the chart:

if(sortedKeysList != null) {

        for(let key in sortedKeysList) {
            let currentTime: number = sortedKeysList[key];
            // just add new points
            if(!this.currentTimes.includes(currentTime)) {
                let date = new Date(currentTime);
                this.labels.push(date);
                this.currentTimes.push(currentTime);
                this.buyingData.push(this.bestLimitsChart[currentTime].buy);
                this.sellingData.push(this.bestLimitsChart[currentTime].sale);
                if(this.bestLimitsChart[currentTime].price != 0)
                    this.lastPriceData.push(this.bestLimitsChart[currentTime].price);
                else
                    this.lastPriceData.push(null);
                this.updateChart();
            }
        }
    }

and the picture of chart:

I do not know what is going on. Any helps will greatly appreciated.

Answer 1

I finally found the problem, for other people facing this issue, you can add unit to your axis:

                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            minute: 'h:mm',     // formatting data in labels
                        },
                        unit: 'minute'          // destroy first and end gaps
                    },
                    display: false,             // preventing labels from being displayed
                }],

similar issue on github: https://github.com/chartjs/Chart.js/issues/2277#issuecomment-314662961