Python Column Chart with Category Axis

Download Python Django Chart Samples

Example shows Python Column Chart with Category Axis. Category x-axis shows the category name / text-label instead of numbers / date-time. Demo also includes Django view & template code that you can run locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
          animationEnabled: true,
          exportEnabled: true,
          title:{
            text: "Gold Reserves",
            fontFamily: "Tahoma"
          },
          axisY: {
            title: "Gold Reserves (in tonnes)"
          },
          data: [{
            type: "column",
            yValueFormatString: "#,##0.## tonnes",
            dataPoints: {{ datapoints|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):
  datapoints = [
    { "y": 3373.64, "label": "Germany" },
    { "y": 2435.94, "label": "France" },
    { "y": 1842.55, "label": "China" },
    { "y": 1828.55, "label": "Russia" },
    { "y": 1039.99, "label": "Switzerland" },
    { "y": 765.215, "label": "Japan" },
    { "y": 612.453, "label": "Netherlands" }
  ]

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

Chart Customizations

The width of datapoint can be customized using dataPointWidth property. Similarly, the minimum & maximum width of the datapoint can be customized by setting dataPointMinWidth & dataPointMaxWidth properties. You can also change the color and fillOpacity of the columns using color and opacity properties respectively.