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
// https://canvasjs.com/javascript-charts/stacked-column-chart/
var dataPointIndex = null;
var chart1 = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Status Summary by Owner",
fontFamily: "arial black",
fontSize: 14,
fontColor: "#695A42"
},
legend: {
//maxHeight: 200,
dockInsidePlotArea: true,
},
axisX: {
interval: 1,
//intervalType: "year"
},
axisY:{
//valueFormatString:"$#0bn",
gridColor: "#B6B1A8",
tickColor: "#B6B1A8"
},
toolTip: {
shared: true,
borderColor: 'gray',
backgroundColor: "#ddd",
content: toolTipContent,
updated: function ( e ) {
for(var i = 0; i < e.entries.length; i++) {
if(e.entries[i].dataPointIndex != dataPointIndex)
e.entries[i].dataSeries.name = e.entries[i].dataSeries.options.name;
}
//console.log("X Value for which toolTip is shown: " + e.entries[0].xValue);
}
},
data: [{
type: 'stackedBar',
name: 'Open',
dataPoints: [
{ x: 1, y: 1.0, label: 'admin', click: onStackClick },
{ x: 2, y: 1.0, label: 'other', click: onStackClick },
{ x: 3, y: 3.0, label: '123', click: onStackClick },
{ x: 4, y: 1.0, label: 'dick', click: onStackClick },
] },{
type: 'stackedBar',
name: 'Ready For Retest',
dataPoints: [
{ x: 2, y: 1.0, label: 'other', click: onStackClick },
]
}]
});
chart1.render();
function toolTipContent(e) {
var str = "";
var total = 0;
for (var i = 0; i < e.entries.length; i++){
//var selected = e.entries[0].dataSeries.index + "-";
//if (e.dataPoint.label==e.entries[i].dataPoint.y) {
// selected = "<i class='fa fa-chevron-right></i>";
//}
var colorStyle = " style='background:"+e.entries[i].dataSeries.color + "'";
var str1 = "<tr><td>"+e.entries[i].dataSeries.name+":</td><td "+colorStyle+">"+e.entries[i].dataPoint.y+"</td></tr>";
total = e.entries[i].dataPoint.y +...