Work-around of Funnel Chart using Range Bar Chart - CanvasJS JavaScript Charts

Work-around of Funnel Chart using Range Bar Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chart_div"></div>

JavaScript

$(function () {
  var options = {
    title: { text: "Customer Conversion" },
    axisX: {
      interval: 1,
      lineThickness: 0,
      gridThickness: 0,
      tickThickness: 0,
      stripLines: []
    },
    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",
    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
    });  
  }
   
  for(var i = 0; i < options.data[0].dataPoints.length; i++) {
    options.axisX.stripLines.push({
      value: i,
      label: options.data[0].dataPoints[i].value,
      labelAlign: "center",
      showOnTop: true,
      thickness: 0,
      color: "white"
    });
  }

	new CanvasJS.Chart("chart_div", options).render();
});