Showing Count and Percent in two Bar Charts - CanvasJS

Showing Count and Percent in two Bar Charts - CanvasJS

by canvasjs

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: [
      {
        type: "bar",
        indexLabel: "{y}",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 }    
        ]
      },
      {
        type: "bar",
        dataPoints: [
        { x: 10, y: 61 },
        { x: 20, y: 45},
        { x: 30, y: 60 },
        { x: 40, y: 85 },
        { x: 50, y: 35 }        
        ]
      }
      ]
    });

showPercent(chart.options.data[1]);

chart.render();

function showPercent(series){
	
  var total = 0;
  var y = 0;
  
  for(var i = 0; i < series.dataPoints.length; i++){
  	y = series.dataPoints[i].y ? series.dataPoints[i].y : 0;
    
  	total += y;
  }
  
  if(total > 0){
    for(var i = 0; i < series.dataPoints.length; i++){
      y = series.dataPoints[i].y ? series.dataPoints[i].y : 0;

      series.dataPoints[i].indexLabel = CanvasJS.formatNumber(y / total * 100) + "%";
    }
  }
}