Python Stacked Area Charts are formed by stacking multiple dataseries & are used to compare contribution of each datapoint to the total. Given example shows Python Stacked Area Chart along with Django view & template source-code that you can run locally.
<!-- index.html --> {% load static %} <html> <head> <title>CanvasJS Python Charts</title> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Productivity by Day" }, animationEnabled: true, axisY: { title: "Hours" }, toolTip: { shared: true }, legend: { cursor: "pointer", itemclick: function(e) { if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } chart.render(); } }, data: [{ type: "stackedArea", name: "Very Distracting", showInLegend: true, yValueFormatString: "0.#hrs", markerSize: 0, dataPoints: {{ very_distracting_data|safe }} },{ type: "stackedArea", name: "Distracting", showInLegend: true, yValueFormatString: "0.#hrs", markerSize: 0, dataPoints: {{ distracting_data|safe }} },{ type: "stackedArea", name: "Productive", showInLegend: true, yValueFormatString: "0.#hrs", markerSize: 0, dataPoints: {{ productive_data|safe }} },{ type: "stackedArea", name: "Very Productive", showInLegend: true, yValueFormatString: "0.#hrs", markerSize: 0, dataPoints: {{ very_productive_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): very_distracting_data = [ { "label": "Sunday", "y": 2.4 }, { "label": "Monday", "y": .6 }, { "label": "Tuesday", "y": .8 }, { "label": "Wednesday", "y": 1.6 }, { "label": "Thursday", "y": 1.4 }, { "label": "Friday", "y": 1.4 }, { "label": "Saturday", "y": 2.6 } ] distracting_data = [ { "label": "Sunday", "y": 3.3 }, { "label": "Monday", "y": 1.6 }, { "label": "Tuesday", "y": 2.1 }, { "label": "Wednesday", "y": 1.6 }, { "label": "Thursday", "y": 1.4 }, { "label": "Friday", "y": 1.7 }, { "label": "Saturday", "y": 4.6 } ] productive_data = [ { "label": "Sunday", "y": 2.4 }, { "label": "Monday", "y": 2 }, { "label": "Tuesday", "y": 2.8 }, { "label": "Wednesday", "y": 1.6 }, { "label": "Thursday", "y": 1.4 }, { "label": "Friday", "y": 1.4 }, { "label": "Saturday", "y": 1.6 } ] very_productive_data = [ { "label": "Sunday", "y": .4 }, { "label": "Monday", "y": 7 }, { "label": "Tuesday", "y": 6.8 }, { "label": "Wednesday", "y": 4.6 }, { "label": "Thursday", "y": 6.4 }, { "label": "Friday", "y": 7.4 }, { "label": "Saturday", "y": 1.6 } ] return render(request, 'index.html', { "very_distracting_data" : very_distracting_data, "distracting_data": distracting_data, "productive_data": productive_data, "very_productive_data": very_productive_data })
The size & type of markers can be changed using markerSize and markerType properties. Some other commonly used customization options in Python Stacked Area Chart includes indexLabel, fillOpacity, color, etc.