Python Column Chart in Dark Theme

Download Python Django Chart Samples

Example shows Python Column Chart in Dark Theme, built using CanvasJS & Django Framework. Library is bundled with pre-defined light & dark themes along with options to customize those themes.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          exportEnabled: true,
          theme: "dark2",
          title:{
            text: "Most Popular Social Networking Sites"
          },
          axisX: {
            title: "Social Network"
          },
          axisY: {
            title: "Monthly Active Users",
            includeZero: true,
            labelFormatter: addSymbols
          },
          data: [{
				    type: "column",
            dataPoints: {{ datapoints|safe }}
          }]
        });
        chart.render();

        function addSymbols(e){
          var suffixes = ["", "K", "M", "B"];
          var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
          if(order > suffixes.length - 1)
            order = suffixes.length - 1;
          var suffix = suffixes[order];
          return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
        }
    }
</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):
  datapoints = [
    { "y": 2200000000, "label": "Facebook" },
    { "y": 1800000000, "label": "YouTube" },
    { "y": 800000000, "label": "Instagram" },
    { "y": 563000000, "label": "Qzone" },
    { "y": 376000000, "label": "Weibo" },
    { "y": 336000000, "label": "Twitter" },
    { "y": 330000000, "label": "Reddit" }
  ]

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

Chart Customizations

Chart theme can be switched by setting theme property. The color of the chart background & the columns can be changed using backgroundColor & color properties.