Python Doughnut Chart in Dark Theme

Download Python Django Chart Samples

Example shows Python Doughnut Chart in dark theme where the color of background is darker & the text content is lighter.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",{
      exportEnabled: true,
      animationEnabled: true,
      theme: "dark2",
      title: {
        text: "Developer Work Week"
      },
      subtitles: [{
        text: "Median hours/week"
      }],
      data: [{
        type: "doughnut",
        startAngle: -90,
        indexLabel: "{name} ({y})",
        yValueFormatString: "#,##0.0#\"%\"",
        dataPoints: {{ developer_work_week_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):
  developer_work_week_data = [
    { "name": "Writing Code", "y": 30.7 },
    { "name": "Debugging", "y": 36.4 },
    { "name": "Problem Solving", "y": 3.7 },
    { "name": "Firefighting", "y": 20.1 },
    { "name": "Overhead", "y": 9.1 }
  ]

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

Chart Customizations

You can customize the background color for chart using backgroundColor property. Similarly, the color of text content can be customized by setting title.fontColor, indexLabelFontColor, etc.