Funnel Bar Chart with CanvasJS

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://chart-templates.com/assets/libs/apps/canvasjs/jquery.canvasjs.min.js" type="text/javascript"></script>
<div id="chart_div"></div>

JavaScript

$(function () {

   var options = {
      title: { text: "Customer Conversion" },
      axisX: {
   			interval: 1,
         lineThickness: 0,
         gridThickness: 0,
         tickThickness: 0,
      },
      axisY: {
         labelFormatter: function () { return " "; },
   				interval: 20,
   				maximum: 100,
   				minimum: -100,

         lineThickness: 0,
         gridThickness: 0,
         tickThickness: 0,
      },
      toolTip: { enabled: false },
   };

		var dataSource = [{
      label: "Awareness",
      value: 180
   },
   {
      label: "Familiarity",
      value: 160
   },
   {
      label: "Consideration",
      value: 90
   },
   {
      label: "Purchase",
      value: 40
   },
   {
      label: "Loyalty",
      value: 30
   }];
   
   options.data = [{
      type: "rangeBar",
      color: "#007c9c",
      
      indexLabel: "{value}",
      indexLabelPlacement: "inside",
      indexLabelFontColor: "#ffffff",

      dataPoints: []
   }];

		for (var i = dataSource.length - 1; i >= 0; i--) {
      options.data[0].dataPoints.push({
         label: dataSource[i].label,
         y: [-(dataSource[i].value / 2), (dataSource[i].value / 2)],
         value: dataSource[i].value
      });
   }
   
	new CanvasJS.Chart("chart_div", options).render();
});