Example shows Python Multi Series Range Bar Chart where bars from different series sharing same x-value are placed one below the other. Demo 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", { theme: "dark1", animationEnabled: true, title: { text: "Temperature Variation Comparison", fontFamily: "Arial" }, axisY: { valueFormatString: "#0.##°C", title: "Temperature (°C)" }, axisX: { valueFormatString: "MMM" }, toolTip: { shared: true }, legend: { verticalAlign: "top", cursor: "pointer", itemclick: hideUnhideDataSeries }, data: [{ type: "rangeBar", name: "Denver", showInLegend: true, legendText: "Denver, CO", yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", markerSize: 0, content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", bevelEnabled: true, dataPoints: {{ denver_weather_data|safe }} },{ type: "rangeBar", name: "Seattle", showInLegend: true, legendText: "Seattle, WA", yValueFormatString: "#0.##°C", xValueFormatString: "MMM YYYY", xValueType: "dateTime", markerSize: 0, bevelEnabled: true, content: "<b>{name}</b> Min: {y[0]}, Max: {y[1]}", dataPoints: {{ seattle_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): denver_weather_data = [ { "x": 1609459200000, "y": [-20, 19.4444] }, { "x": 1612137600000, "y": [-27.8, 21.1111] }, { "x": 1614556800000, "y": [-15, 25.6] }, { "x": 1617235200000, "y": [-16.7, 28.8889] }, { "x": 1619827200000, "y": [-6.1, 32.2] }, { "x": 1622505600000, "y": [-0.6, 40] }, { "x": 1625097600000, "y": [5.6, 40.6] }, { "x": 1627776000000, "y": [3.3, 37.8] }, { "x": 1630454400000, "y": [-2.2, 38.3] }, { "x": 1633046400000, "y": [-7.8, 31.1] }, { "x": 1635724800000, "y": [-13.3, 28.3] }, { "x": 1638316800000, "y": [-17.8, 27.8] } ] seattle_weather_data = [ { "x": 1609459200000, "y": [-9.4, 15] }, { "x": 1612137600000, "y": [-8.9, 12.8] }, { "x": 1614556800000, "y": [-4.389, 20] }, { "x": 1617235200000, "y": [-5, 27.2222] }, { "x": 1619827200000, "y": [0.6, 27.8] }, { "x": 1622505600000, "y": [2.8, 44.4] }, { "x": 1625097600000, "y": [6.722, 35] }, { "x": 1627776000000, "y": [6, 36.1] }, { "x": 1630454400000, "y": [1.7, 29.4444] }, { "x": 1633046400000, "y": [-2.8, 22.2] }, { "x": 1635724800000, "y": [-4.4, 18.3] }, { "x": 1638316800000, "y": [-13.3, 15.5556] } ] return render(request, 'index.html', { "denver_weather_data" : denver_weather_data, "seattle_weather_data": seattle_weather_data })
Indexlabels can be shown for the datapoints using indexLabel property. The placement &orientation of indexlabels can be customized using indexLabelPlacement &indexLabelOrientation properties. Some other commonly used customization includes indexLabelFontSize, indexLabelBackgroundColor, etc.