Python Bar Chart with Category Axis

Download Python Django Chart Samples

Example shows Python Bar Chart with Category Axis, where x-axis displays text-labels instead of numbers or date values. 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:"Electricity Price"
          },
          subtitles: [{
            text: "USA States - 2020"
          }],
          axisY2: [{
            suffix: " ¢/kWh",
            labelAngle: 0,
            labelMaxWidth: 150,
            lineThickness: 1
          }],
          axisX: {
            reversed: true
          },
          data: [{
            type: "bar",
            yValueFormatString: "#.00 ¢/kWh",
            axisYType: "secondary",
            dataPoints: {{ electricity_price_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):
    electricity_price_data = [
      { "y": 8.58, "label": "Texas" },
      { "y": 9.69, "label": "Pennsylvania" },
      { "y": 10.35, "label": "Florida" },
      { "y": 14.9, "label": "New York" },
      { "y": 18.05, "label": "Massachusetts" },
      { "y": 18.15, "label": "California" }
    ]
    return render(request, 'index.html', { "electricity_price_data" : electricity_price_data })

Chart Customizations

You can attach dataseries to either primary or secondary axis by using axisYType property. Format of text shown in axis labels can be defined by setting valueFormatString property. In some cases when your requirement is to completely customize / format the labels, you can use labelFormatter.