JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/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 jsonData = {
  "Kontrak": [
    { "x": 0, "total": "48", "kdcab": "JKT" },
    { "x": 1, "total": "33", "kdcab": "BKL" },
    { "x": 2, "total": "25", "kdcab": "PK4A" }
  ],
  "Tetap": [
    { "x": 0, "total": "165", "kdcab": "JKT" },
    { "x": 1, "total": "127", "kdcab": "BKL" },
    { "x": 2, "total": "52", "kdcab": "PK4A" }
  ],
  "Honorer": [
    { "x": 0, "total": "2", "kdcab": "JKT" }
  ],
  "RUPS": [
    { "x": 0, "total": "13", "kdcab": "JKT" }
  ],
  "Kontrak Project": [
    { "x": 0, "total": "1", "kdcab": "JKT" }
  ],
  "Percobaan": [
    { "x": 2, "total": "1", "kdcab": "PK4A" }
  ],
  "MITRA": [
    { "x": 2, "total": "7", "kdcab": "PK4A" }
  ]
};

var dataPoints = [];

for (var key in jsonData) {
  var data = jsonData[key];
  var series = { type: "stackedColumn", showInLegend: true, name: key, dataPoints: [] };

  for (var i = 0; i < data.length; i++) {
    series.dataPoints.push({ x: data[i].x, label: data[i].kdcab, y: parseInt(data[i].total) });
  }

  dataPoints.push(series);
}

// Create the chart
var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: "Stacked Column Chart"
  },
  axisY: {
    title: "Total"
  },
  toolTip: {
    shared: true
  },
  data: dataPoints
});

chart.render();