chartjs-plugin-streaming blinking bars

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>
<canvas id="chart1"></canvas>

JavaScript

var isZero = 0;
var targetTime = 0;
var savedValue = 0;
var i;

var barData = {
  labels : [], 
  datasets: [{
    data: [],
    label: 'Dataset 1',
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.5)'
  }] 
}     

var barOptions = {
  animation : { duration: 0 },
  scales: {
    xAxes: [{
      type: 'realtime',
      ticks: {
        fontSize: 6
      }
    }],
    yAxes: [{
      ticks: {
        fontSize: 7,
        beginAtZero: true,
        max: 10,
        stepSize: 2,
        fixedStepSize: 2
      }
    }]
  },
  plugins: {
    streaming: {
      delay: 1000,
      onRefresh: function(chart) {
        var labels = chart.data.labels;
        var data = chart.data.datasets[0].data;
      
        // Add new data at the current time
        labels.push(Date.now());
        data.push(Math.random() * 10);

        // Blink the bar at the target time
        for (i = 0; i < labels.length; i++) {
        	if (labels[i] == targetTime) {
            data[i] = isZero ? savedValue : 0;
            isZero = !isZero;
            break;
          }
        }

        // Change the blinking bar if it disappered
        if (i == labels.length) {
        	targetTime = labels[labels.length - 1];
          savedValue = data[data.length - 1];
        }
      }
    }
  }
}

var ctx = document.getElementById('chart1').getContext('2d');
new Chart(ctx, { type: 'bar', data: barData, options: barOptions });