Stacked Bar Chart With Tooltip Not Showing Value Zero (0) | CanvasJS JavaScript Charts

Stacked Bar Chart With Tooltip Not Showing Value Zero (0) | CanvasJS JavaScript Charts

by pworthing

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 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 ) {
     console.log("X Value for which toolTip is shown: " + e.entries[0].xValue);  
   }  
      },
      data: [
      
        { type: 'stackedBar',
    name: 'Open',
    dataPoints: [ 
  { y: 1.0, label: 'admin', click: onStackClick },
  { y: 1.0, label: 'other', click: onStackClick },
  { y: 3.0, label: '123', click: onStackClick },
  { y: 1.0, label: 'dick', click: onStackClick },
] },
  { type: 'stackedBar',
    name: 'Ready For Retest',
    dataPoints: [ 
  { 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 + total;
        str = str.concat(str1);
      }
      str +=...