Example shows Python Multi Series Range Spline Area Chart. It also includes 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", { title: { text: "Min/Max Temperature Comparison" }, theme: "light2", axisY: { valueFormatString: "#0.##°C", title: "Temperature (°C)" }, axisX: { interval: 1, intervalType: "month", valueFormatString: "MMM" }, toolTip: { shared: true }, legend: { //dockInsidePlotArea: true, verticalAlign: "top", cursor: "pointer", itemclick: hideUnhideDataSeries }, data: [{ type: "rangeSplineArea", name: "Doha", showInLegend: true, legendText: "Doha, QA", yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", markerSize: 0, content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", dataPoints: {{ doha_weather_data|safe }} },{ type: "rangeSplineArea", name: "Manchester", showInLegend: true, legendText: "Manchester, UK", yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", markerSize: 0, content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", dataPoints: {{ machester_weather_data|safe }} }] }); chart.render(); function hideUnhideDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.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): machester_weather_data = [ { "x": 1609459200000, "y": [-5.889, 12] }, { "x": 1612137600000, "y": [-5.278, 15] }, { "x": 1614556800000, "y": [-3, 21] }, { "x": 1617235200000, "y": [-4.278, 19] }, { "x": 1619827200000, "y": [-1.389, 23] }, { "x": 1622505600000, "y": [3.222, 27] }, { "x": 1625097600000, "y": [8, 38] }, { "x": 1627776000000, "y": [6.111, 23] }, { "x": 1630454400000, "y": [4.778, 28] }, { "x": 1633046400000, "y": [1.5, 21] }, { "x": 1635724800000, "y": [-5.389, 16] }, { "x": 1638316800000, "y": [-2.222, 15] } ] doha_weather_data = [ { "x": 1609459200000, "y": [7, 29.889] }, { "x": 1612137600000, "y": [9.5, 32] }, { "x": 1614556800000, "y": [12.278, 41.5] }, { "x": 1617235200000, "y": [13, 41.722] }, { "x": 1619827200000, "y": [21, 47] }, { "x": 1622505600000, "y": [23.611, 48.111] }, { "x": 1625097600000, "y": [25.111, 48.222] }, { "x": 1627776000000, "y": [27.722, 48] }, { "x": 1630454400000, "y": [22.611, 46.111] }, { "x": 1633046400000, "y": [19.278, 41.722] }, { "x": 1635724800000, "y": [15.389, 36.611] }, { "x": 1638316800000, "y": [11.889, 31.111] } ] return render(request, 'index.html', { "machester_weather_data" : machester_weather_data, "doha_weather_data": doha_weather_data })
You can customize the color of legend markers & it's border using legendMarkerColor & legendMarkerBorderColor properties. Also, the type of the marker can be changed by setting the legendMarkerType.