Python Funnel Chart with Index / Data Labels

Download Python Django Chart Samples

Example shows Python Funnel Chart with Index / Data Labels that are commonly called as annotations. Library automatically adjusts index-labels to show maximum number of labels without overlapping. Demo also includes Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",{
      animationEnabled: true,
      title: {
        text: "Recruitment Analysis"
      },
      data: [{
        type: "funnel",
        indexLabel: "{label} - {y}",
        toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
        valueRepresents: "area",
        dataPoints: {{ recruitment_data|safe }}
      }]
    });
    calculatePercentage();
    chart.render();

    function calculatePercentage() {
      var dataPoint = chart.options.data[0].dataPoints;
      var total = dataPoint[0].y;
      for (var i = 0; i < dataPoint.length; i++) {
        if (i == 0) {
          chart.options.data[0].dataPoints[i].percentage = 100;
        } else {
          chart.options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
        }
      }
    }
  }
</script>    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
  recruitment_data = [
    { "y": 4271, "label": "Applications" },
    { "y": 2596, "label": "Screened" },
    { "y": 1448, "label": "Qualified" },
    { "y": 1243, "label": "Interviewed" },
    { "y": 241, "label": "Offers Extended" },
    { "y": 207, "label": "Hired" }
  ]

  return render(request, 'index.html', { "recruitment_data" : recruitment_data })

Chart Customizations

indexLabel property can be used to show Index / Data Labels for the data-points. Neck of the funnel can be customized using neckHeight and neckWidth properties.