JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text:"Rendering Chart with dataPoints from External JSON"
  },
  axisX: {
  	valueFormatString: "DD MMM YYYY",
    interval: 1,
    intervalType: "day"
  },
  toolTip:  {
  	shared: true
  },
  data: []
});
$.getJSON("https://api.npoint.io/f18ed6d2f20ec86953d2", function(data) {
	chart.options.data = [];
  var occurrences = data.reduce( (acc, obj) => {
  	date = (obj.timestamp - (obj.timestamp % (24 * 60 * 60)))*1000; // to group by date
    acc[obj.ajax_action] = acc[obj.ajax_action] ? acc[obj.ajax_action] : {};
    acc[obj.ajax_action][date] = (acc[obj.ajax_action][date] || 0)+1
    return acc;
  }, {} )
	for(var actions in occurrences) {
  	var dataPoints = [];
  	for(var key in occurrences[actions]) {
    	dataPoints.push({ x: parseInt(key), y: occurrences[actions][key]});
    }
    chart.options.data.push({
    	type: "line",
      showInLegend: true,
      name: actions,
      xValueType: 'dateTime',
      xValueFormatString: "DD MMM YYYY",
      dataPoints: dataPoints
    });
  }
  
  chart.render(); 
});