Example shows Python Stacked Bar 100% Chart. It also includes Django MVT source-code that you can try running locally.
<!-- index.html --> {% load static %} <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, theme: "dark2", //"light1", "dark1", "dark2" title:{ text: "Division of Products Sold in 3rd Quarter" }, axisY:{ interval: 10, suffix: "%" }, toolTip:{ shared: true }, legend: { cursor: "pointer", itemclick: toggleDataSeries }, data:[{ type: "stackedBar100", toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "July", dataPoints: {{ july_data|safe }} }, { type: "stackedBar100", toolTipContent: "<b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "August", dataPoints: {{ august_data|safe }} }, { type: "stackedBar100", toolTipContent: "<b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "September", dataPoints: {{ september_data|safe }} }] }); chart.render(); function toggleDataSeries(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): july_data = [ { "y": 550, "label": "Water Filter" }, { "y": 450, "label": "Modern Chair" }, { "y": 70, "label": "VOIP Phone" }, { "y": 200, "label": "Microwave" }, { "y": 324, "label": "Expresso Machine" }, { "y": 300, "label": "Lobby Chair" } ] august_data = [ { "y": 450, "label": "Water Filter" }, { "y": 550, "label": "Modern Chair" }, { "y": 270, "label": "VOIP Phone" }, { "y": 400, "label": "Microwave" }, { "y": 524, "label": "Expresso Machine" }, { "y": 500, "label": "Lobby Chair" } ] september_data = [ { "y": 350, "label": "Water Filter" }, { "y": 660, "label": "Modern Chair" }, { "y": 265, "label": "VOIP Phone" }, { "y": 271, "label": "Microwave" }, { "y": 360, "label": "Expresso Machine" }, { "y": 340, "label": "Lobby Chair" } ] return render(request, 'index.html', { "july_data" : july_data, "august_data": august_data, "september_data": september_data })
You can place indexlabel inside the datapoint by setting indexLabelPlacement property to "inside". Other customizable options include indexLabelOrientation, indexLabelTextAlign, yValueFormatString, etc.