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>

JavaScript

var dps = [
  { x:  1, y: 610 },
  { x:  2, y: 680 },
  { x:  3, y: 690 },
  { x:  4, y: 700 },
  { x:  5, y: 710 },
  { x:  6, y: 658 },
  { x:  7, y: 734 },
  { x:  8, y: 963 },
  { x:  9, y: 847 },
  { x:  10, y: 853 },
  { x:  11, y: 869 },
  { x:  12, y: 943 },
  { x:  13, y: 970 },
  { x:  14, y: 869 },
  { x:  15, y: 890 },
  { x:  16, y: 930 },
  { x:  17, y: 850 },
  { x:  18, y: 905 },
  { x:  19, y: 980 },
  { x:  20, y: 858 },
  { x:  21, y: 734 },
  { x:  22, y: 963 },
  { x:  23, y: 847 },
  { x:  24, y: 853 },
  { x:  25, y: 869 },
  { x:  26, y: 943 },
  { x:  27, y: 970 },
  { x:  28, y: 869 },
  { x:  29, y: 890 },
  { x:  30, y: 930 },
  { x:  31, y: 750 }
];

var top10Dps = getHighestValues(dps, 10);
//var top10Dps = dps;

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title:{
    text: "Website Traffic"
  },
  axisY: {
  	//includeZero: true
  },
  data: [{
    type: "line",
    dataPoints: top10Dps
  }]
});
chart.render();

function getHighestValues(dps, num){
  var topDps = [...dps].sort((a, b) => b.y - a.y).slice(0, num);
  topDps = topDps.sort((a, b) => (a.x.getTime ? a.x.getTime() : a.x) - (b.x.getTime ? b.x.getTime() : b.x));
  return topDps;
}