Python Responsive Charts using Django

Download Python Django Chart Samples

Example shows Python Responsive Chart that auto adjusts to different screen-sizes including mobile, tablet, laptop, etc. Demo includes 3 buttons that lets you change size of the chart by clicking them.

<!-- index.html -->
{% load static %}
<html>
<head>
<script>
    window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: "Highest Mountain Peaks",
            fontFamily: "Verdana, sans-serif"
        },
        subtitles: [{
            text: "Based on Elevation",
            fontFamily: "Verdana, sans-serif"
        }],
        axisY: {
            title: "Elevation (in metres)",
            suffix: " m"
        },
        axisX: {
            labelAngle: 0,
            labelTextAlign: "center"   
        },
        data: [{
            type: "column",
            yValueFormatString: "#,##0 m",
            dataPoints: {{ mountain_elevation_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):
    
    mountain_elevation_data = [
			{ "label": "Mount Everest", "y": 8848 },
			{ "label": "K2", "y": 8611 },
			{ "label": "Kangchenjunga", "y": 8586 },
			{ "label": "Lhotse", "y": 8516 },
			{ "label": "Makalu", "y": 8485 },
			{ "label": "Cho Oyu", "y": 8201 },
			{ "label": "Dhaulagiri", "y": 8167 },
			{ "label": "Manaslu", "y": 8163 },
			{ "label": "Nanga Parbat", "y": 8126 },
			{ "label": "Annapurna", "y": 8091 }
    ]
    return render(request, 'index.html', { "mountain_elevation_data": mountain_elevation_data })

Chart Customizations

Chart takes up 100% width of the container. However, you can have chart of fixed width by setting width property. Height of the chart can be customized by setting height property. Similar to chart width, datapoint can also have fixed width - achieved by setting dataPointWidth property.