JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://codepen.io/anon/pen/aWapBE.js"></script>
<body>
    <canvas id="chartJSContainer" width="400" height="400"></canvas>
</body>

JavaScript

var rawUnprocessedData = [];

    for (i = 0; i < 50; i++)
    {
        rawUnprocessedData.push({x:i, y:0});
    }

var colours = palette('tol', 2).map(function(hex) {
        return '#' + hex;
      })

console.log(colours[0])

var datasets = [{
            label: 'Raw Data',
            fill: false,
            borderColor: colours[1],
            backgroundColor: colours[1],
            data: rawUnprocessedData
}];

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: datasets
    },
    options: {
        elements: {
          point: {
          	radius: 0,
          }
        },
        legend: {
        	labels: {
        	boxWidth: 12
          }
        }
    }
});

function toRadians (angle) {
  return angle * (Math.PI / 180);
}

var normalPhaseIncrement = toRadians(360/50)

	function getFakeData()
  {
  	 fakeData = []
    for (i = 0; i < 50; i++)
    {
    	 fakeData.push({phase:i*normalPhaseIncrement+Math.random()*0.1, val:Math.random()*0.5+3})
    }
    return fakeData;
  }

    function updateIfNewDataAvailable() {

				data = getFakeData();

        for (i = 0; i < 50; i++)
        {
        	
            rawUnprocessedData[i].x = data[i].val*Math.cos(data[i].phase);
            rawUnprocessedData[i].y = data[i].val*Math.sin(data[i].phase);
        }
        
				scatterChart.update(0);

        // Check for data every second
        setTimeout(updateIfNewDataAvailable, 1000);
    }
    
    updateIfNewDataAvailable();