JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="DrugUtilizationChart" style="height:420px;max-height:405px; margin-left:15px; width: 95%;text-align:center;">No data available.</div>
JavaScript 1.7
$.getJSON("https://api.myjson.com/bins/102l31", function(result) {
var dataPlots = [];
if (result && result.length > 0) {
for (var i = 0; i < result.length; i++) {
var values = result[i];
var index = Number(values.Month);
var plot = {
x: new Date(values.Year, values.Month - 1, 0),
y: Number(values.TotalCalls),
name: values.MonthLabel,
shortAnswer: values.ShortAnswer,
displaytext: '<table><tbody><tr><td>Short Answer: </td><td>' + values.ShortAnswer + '</td></tr>' +
'<tr><td>Total Calls: </td><td>' + values.TotalCalls + '</td></tr>' +
'<tr><td>Month: </td><td>' + values.MonthLabel + '</td></tr></tbody></table>'
};
if (i == 0) {
dataPlots.push({
type: "stackedColumn",
showInLegend: values.ShortAnswer ? true : false,
legendText: "{shortAnswer}",
indexLabelFontFamily: 'Helvetica',
indexLabelFontSize: 14,
//name:"{shortAnswer}",
toolTipContent: "{displaytext}",
dataPoints: [plot],
click: function(e) {
GetDrugUtilizationChartDetailReport(e.dataPoint.shortAnswer);
}
});
} else {
var indexData = dataPlots[index];
if (indexData) {
dataPlots[index].dataPoints.push(plot);
} else {
dataPlots.push({
type: "stackedColumn",
showInLegend: values.ShortAnswer ? true : false,
legendText: "{shortAnswer}",
indexLabelFontFamily: 'Helvetica',
indexLabelFontSize: 14,
//name:"{shortAnswer}",
toolTipContent: "{displaytext}",
dataPoints: [plot],
click: function(e) {
GetDrugUtilizationChartDetailReport(e.dataPoint.shortAnswer);
}
});
}
}
}
CanvasJS.addColorSet("colorShades", [
"#F15A26",
"#597FAD",
...