Python Doughnut Charts using Django

Download Python Django Chart Samples

Example shows Python Donut Chart with indexlabels. It 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",{
      theme: "light2",
      animationEnabled: true,
      exportEnabled: true,
      title: {
        text: "Composition \u2800of Magma",
        dockInsidePlotArea: true,
        verticalAlign: "center",
        maxWidth: 140,
        fontSize: 22
      },
      data: [{
        type: "doughnut",
        indexLabel: "{label} - {y}",
        yValueFormatString: "#,##0.0\"%\"",
        startAngle: 90,
        dataPoints: {{ magma_composition_data|safe }}
      }]
    });
    chart.render();
  }
</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):
  magma_composition_data = [
    {"label":"Oxygen","symbol":"O","y":46.6},
    {"label":"Silicon","symbol":"Si","y":27.7},
    {"label":"Aluminium","symbol":"Al","y":13.9},
    {"label":"Iron","symbol":"Fe","y":5},
    {"label":"Calcium","symbol":"Ca","y":3.6},
    {"label":"Sodium","symbol":"Na","y":2.6},
    {"label":"Magnesium","symbol":"Mg","y":2.1},
    {"label":"Others","symbol":"Others","y":1.5}
  ]

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

Chart Customizations

Inner and outer radius of the Doughnut / Donut Chart can be changed using innerRadius and radius respectively. Some other commonly used customization options are indexLabelPlacement, color, etc.