Python Range Area Charts are used to simultaneously show low & high values over a period of time. Below example shows range area chart along with Django source-code that you can try locally.
<!-- index.html --> {% load static %} <html> <head> <title>CanvasJS Python Charts</title> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Temperature Range Variation in Sydney" }, theme: "light2", axisY: { valueFormatString: "#0.##°C", title: "Temperature (°C)" }, axisX: { interval: 1, intervalType: "month", valueFormatString: "MMM" }, toolTip: { content: "{x} </br> Min: {y[0]}, Max: {y[1]}" }, data: [{ type: "rangeArea", xValueFormatString: "MMM YYYY", yValueFormatString: "#0.##°C", xValueType: "dateTime", markerSize: 0, dataPoints: {{ sydney_temperature_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): sydney_temperature_data = [ { "x": 1609459200000, "y": [7.722, 41.6] }, { "x": 1612137600000, "y": [11.889, 35.2] }, { "x": 1614556800000, "y": [9.389, 35.611] }, { "x": 1617235200000, "y": [-1, 31.2] }, { "x": 1619827200000, "y": [-4, 26.611] }, { "x": 1622505600000, "y": [-2.222, 22.9] }, { "x": 1625097600000, "y": [-4.722, 26.5] }, { "x": 1627776000000, "y": [-3, 27.9] }, { "x": 1630454400000, "y": [-2.611, 31.5] }, { "x": 1633046400000, "y": [0.5, 34.3] }, { "x": 1635724800000, "y": [5.778, 30.4] }, { "x": 1638316800000, "y": [8.889, 38.222] } ] return render(request, 'index.html', { "sydney_temperature_data" : sydney_temperature_data })
Opacity of the filled region can be changed by setting fillOpacity. The color of the filled region & the lines that envelop the are can be changed by setting color & lineColor properties.