Python Step Area Chart using Django

Download Python Django Chart Samples

Python Step Area Chart is similar to Step Line Chart except that the enclosed area is shaded. Given example shows Python Step Area Chart along with Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      theme: "dark1",
      title:{
        text: "Customer Satisfaction Based on Reviews",
        fontFamily: "Arial"
      },
      axisX: {
        valueFormatString: "MMM"
      },
      axisY: {
        title: "Satisfied Customers",
        suffix: "%"
      },
      data: [{
        type: "stepArea",
        markerSize: 6,
        xValueFormatString: "MMM",
        yValueFormatString: "#,##0.##\"%\"",
        xValueType: "dateTime",
        dataPoints: {{ customer_satisfaction_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):
    customer_satisfaction_data = [
        { "x": 1609439400000, "y": 54 },
        { "x": 1612117800000, "y": 78 },
        { "x": 1614537000000, "y": 70 },
        { "x": 1617215400000, "y": 82 },
        { "x": 1619807400000, "y": 70 },
        { "x": 1622485800000, "y": 86 },
        { "x": 1625077800000, "y": 80 },
        { "x": 1627756200000, "y": 74 },
        { "x": 1630434600000, "y": 83 },
        { "x": 1633026600000, "y": 88 },
        { "x": 1635705000000, "y": 72 },
        { "x": 1638297000000, "y": 70 }
    ]

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

Chart Customizations

You can change the color of line and the filled area using lineColor and color properties respectively. Some of the other commonly used customization options include fillOpacity, lineThickness, etc.