Example shows Python Multi Series Range Column Chart where floating columns from different series are placed one next to another. 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: "Monthly Temperature Comparison" }, theme: "dark2", exportEnabled: true, axisY: { valueFormatString: "#0.##°C", title: "Temperature (°C)" }, axisX: { interval: 1, intervalType: "month", valueFormatString: "MMM" }, toolTip: { shared: true }, legend: { dockInsidePlotArea: true, cursor: "pointer", itemclick: hideUnhideDataSeries }, data: [{ type: "rangeColumn", name: "Perth", showInLegend: true, yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", dataPoints: {{ perth_weather_data|safe }} },{ type: "rangeColumn", name: "Hobart", showInLegend: true, yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", dataPoints: {{ hobart_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): hobart_weather_data = [ { "x": 1609459200000, "y": [-1.8, 37.5] }, { "x": 1612137600000, "y": [-0.3, 32.8] }, { "x": 1614556800000, "y": [-1.611, 30.611] }, { "x": 1617235200000, "y": [-3.8, 32.3] }, { "x": 1619827200000, "y": [-5.1, 24.611] }, { "x": 1622505600000, "y": [-4.6, 18.5] }, { "x": 1625097600000, "y": [-5.611, 17.778] }, { "x": 1627776000000, "y": [-5.722, 19.722] }, { "x": 1630454400000, "y": [-6.3, 26.611] }, { "x": 1633046400000, "y": [-4.8, 24.611] }, { "x": 1635724800000, "y": [-5.8, 28.3] }, { "x": 1638316800000, "y": [-1.9, 33.222] } ] perth_weather_data = [ { "x": 1609459200000, "y": [11.389, 43] }, { "x": 1612137600000, "y": [9.278, 42] }, { "x": 1614556800000, "y": [7.5, 42] }, { "x": 1617235200000, "y": [7, 35.222] }, { "x": 1619827200000, "y": [4.389, 29.5] }, { "x": 1622505600000, "y": [0, 22.4] }, { "x": 1625097600000, "y": [3.389, 21.722] }, { "x": 1627776000000, "y": [2, 26.111] }, { "x": 1630454400000, "y": [3, 30.4] }, { "x": 1633046400000, "y": [2.389, 33.611] }, { "x": 1635724800000, "y": [6, 37.4] }, { "x": 1638316800000, "y": [8.7, 43.722] } ] return render(request, 'index.html', { "perth_weather_data" : perth_weather_data, "hobart_weather_data": hobart_weather_data })
You can show dataseries name in legend by setting showInLegend property to true. Text shown in legend can be changed by setting name or legendText properties.