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 dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text:"Rendering Chart with dataPoints from External JSON"
  },
  data: [{
    type: "pie",
    indexLabel: "{label}: {y}",
    dataPoints : dataPoints,
  }]
});
$.getJSON("https://api.npoint.io/4a228e08590f61acd669", function(data) {
  var occurrences = data.reduce( (acc, obj) => (acc[obj.ajax_action] = (acc[obj.ajax_action] || 0)+1, acc), {} )

  for (var key in occurrences) {
    dataPoints.push({ label: key, y: Number(occurrences[key])});
  }
  chart.render();
});