Is there an option to make a moving vertical gradient?

[ilyador]

I am using the basic Chart.js gradient example and I get the results I want. Which looks like this. I want to make it move with the gradient.

The streaming chart is moving smoothly and I see no way to use the background gradient function to keep up with that movement. It is simply being refreshed (which looks bad).

This is what I have tried. Maybe there is a way to smooth the transition?

function createBackgroundGradient (context) {
    let chartArea = context.chart.chartArea
    if (!chartArea) return null

    let chartWidth = chartArea.right - chartArea.left
    let chartHeight = chartArea.bottom - chartArea.top
    width = chartWidth
    height = chartHeight
    let ctx = context.chart.ctx
    gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0)

    gradient drawRealTimeGradient(gradient, context.dataset.data)
}


function drawRealTimeGradient (gradient, streamData) {
  let dataLength = streamData.length
  let stops = Array.from(Array(dataLength).keys()).map(normalize(0, dataLength))
  for (let i = 0; i < dataLength; i++) {
    gradient.addColorStop(stops[i], `hsla(0, 100%, 50%, ${Math.random()})`)
  }

  return gradient
}


const myChart = new Chart(ctx, {

  type: 'line',
  data: {
    labels: graphDataTime,
    datasets: [{
      label: 'Data',
      borderColor: function (context) {
        return createBackgroundGradient(context)
      },
      // .....
      xAxes: [{
        type: 'realtime',
        realtime: {
          onRefresh: function (context) {
            context.data.datasets.forEach(function (dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random() * 150
              })
...