JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: []
});

function addDataPoints(data){
  var occurrencesMaxLength = 0;  // contains the length of occurrences with maximum number of data

  for( var i = 0; i < data.length; i++ ){  
    if( occurrencesMaxLength < data[i].occurrences.length ){
      occurrencesMaxLength = data[i].occurrences.length;
    }
  }     

  // addding datSeries
  for( var j = 0; j < occurrencesMaxLength; j++ ){
    chart.options.data.push({
      type:"stackedColumn",
      dataPoints:[]
    });
  }

  // adding dataPoints
  for( var k = 0; k < data.length; k++ ){
    for( var l = 0; l < occurrencesMaxLength; l++ ){
      if( data[k].occurrences[l] === undefined)
        chart.options.data[l].dataPoints.push({label: data[k].id, y: null});
      else
        chart.options.data[l].dataPoints.push({label: data[k].id, y: data[k].occurrences[l]});
    }
  }
  chart.render(); 
}

$.getJSON("https://api.myjson.com/bins/pqdk0", addDataPoints);