Chart.js: Don't stretch axes beyond chart

Question

I'm using chart.js 2.9.4 and the ng2-charts wrapper for Angular. I'm trying to display incoming live data, but have trouble configuring the chart so that the ticks/axis don't stretch beyond the data in the chart. In other words, I want the chart data points to fill the entire width of the chart grid.

StackBlitz showing my issue.

If you keep looking at the chart as data is added, you see that most of the time the ticks stretch beyond the last point in the chart:

The only solution I could come up with is overwriting the max value of the ticks on the x-axis each time new data is added to the chart: options.scales.xAxes[0].ticks.max = x;. Uncomment line 68 in the StackBlitz in order to apply this. This solves my problem but introduces another. Sometimes as data gets added, the last two ticks overlap:

I've tried experimenting with various parameters of the scales and ticks options (bounds,distribution,stepSize,source,autoSkip,autoSkipPadding) with no results. Is there any combination of configuration parameters to solve my issue ?

Answer 1

You may want to add delay at streaming plugin, the config will look something like:

scales: {
      x: {
        type: 'realtime',   // x axis will auto-scroll from right to left
        realtime: {         // per-axis options
          delay: 1000,      // delay of 1000 ms, so upcoming values are known before plotting a line
          pause: false,     // chart is not paused
          ttl: undefined,   // data will be automatically deleted as it disappears off the chart
          
        }
      },
      

I have tested this on your code, and it seems to work as expected, you may want to tune some parameters as needed.