Option 'spanGaps' not working in vue

[TristanDuck]

Using a listener-based feed, whenever there is a time-gap of no data it will cutoff the graph. However, when new data comes in it will interpolate the gap of no data between the two points. Is there any way I can keep the chart showing no data points during the cutoff?

Chartjs v2.9.4 chartjs-plugin-streaming v1.9

Added spanGaps in dataset array, but doesn't seem to be working.

    datasets: [
      {
        label: this.label,
        fill: false,
        borderWidth: 1.5,
        pointHitRadius: 0,
        pointRadius: 0,
        spanGaps: false,
        data: []
      }
    ]

  chartoptions: {
    spanGaps: false,
    normalized: true,
    animation: false,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'realtime',
        realtime: {
          duration: 10000,
          delay: 5000
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: this.label,
          lineHeight: 1.0,
          padding: 4,
          fontColor: '#fff'
        },
        ticks: {
          min: this.min,
          max: this.max
        }
      }]
    }
  }

Example of cutoff:

Example of unwanted interpolation:

[TristanDuck]

Updated to vue3, chartjs 3.x, and chartjs-plugin-streaming 2.x.

spanGaps: false, didn't work but spanGaps: 1000 works where 1000 is time in ms (for my x-axis).

[BenWoodford]

@TristanDuck where exactly did you set that? I'm using the latest ChartJS and Streaming Plugin but my gaps are being spanned no matter what I do

[TristanDuck]

@BenWoodford sorry for the late reply, but I put it inside the dataset array and not my options array. datasets: [ { fill: false, spanGaps: 1000, cubicInterpolationMode: 'monotone', parsing: false, pointHitRadius: 0, pointRadius: 0, borderWidth: 1.5, label: 'Label', data: [] } ]