JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

<div id="tableContainer">
  <table id="chartData">
    <tr><td>Visual</td></tr>
    <tr><td>Zero</td></tr>
  </table>
</div>

CSS

span.red {
  color: red;
}

span.blue {
  color: blue;
}

td {
  border: 1px solid black;
}

#tableContainer {
  max-width: 100%;
  overflow-x: auto; 
}

JavaScript

var dps = [];  

var chart = new CanvasJS.Chart("chartContainer",{
  title: {
    text: "Dynamic Chart"
  },
  data: [{
    type: "line",
    markerBorderThickness: 2,
    markerColor: "white",
    dataPoints : dps
  }]
});

chart.render();
var xVal = dps.length + 1;
var yVal = 15;	
var updateInterval = 100;
var color = "";

var updateChart = function () {      	

  yVal = yVal +  Math.round(5 + Math.random() *(-5-5));

  if(dps.length && yVal < dps[dps.length - 1].y)
  {
    //Setting markerBorderColor and lineColor for each specific dataPoint 
    color = (yVal % 2 === 0 ? "red" : "blue");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else if(dps.length)
  {
    //Setting markerBorderColor and lineColor for each specific dataPoint 
    color = (yVal % 2 === 0 ? "blue" : "red");
    dps.push({x: xVal, y: yVal, markerBorderColor: color});
    dps[dps.length - 2].lineColor = color;
  }
  else
    dps.push({x: xVal, y: yVal, markerBorderColor: "blue"});

  $("#chartData tr:first-child").append("<td>" + (color == "red" ? "" : "<span class='blue'>"+yVal+"</span>") +"</td>")
  $("#chartData tr:nth-child(2)").append("<td>"+ (color == "red" ? "<span class='red'>"+yVal+"</span>" : "") +"</td>")

  xVal++;
  chart.render();		
  xVal < 70 && setTimeout(function(){updateChart()}, updateInterval); 
}
setTimeout(function(){updateChart()}, updateInterval);