Demo shows Python Pie Chart with Index Labels built using CanvasJS & Django framework. It also includes source-code that you can try locally.
<!-- index.html --> {% load static %} <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { exportEnabled: true, animationEnabled: true, title: { text: "Monthly Expenses" }, data: [{ type: "pie", legendText: "{label}", yValueFormatString: "#,###\"%\"", indexLabel: "{label} ({y})", dataPoints: {{ monthly_expense_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): monthly_expense_data = [ { "label": "Accomodation", "y": 30 }, { "label": "Food & Groceries", "y": 25 }, { "label": "Utilities", "y": 5 }, { "label": "Entertainment & Fun", "y": 20 }, { "label": "Savings", "y": 10 }, { "label": "Cellphone & Internet", "y": 10 } ] return render(request, 'index.html', { "monthly_expense_data" : monthly_expense_data })
exploded property can be used to set a pie slice to be exploded during initial render. Some other commonly used customizations are radius, startAngle, indexLabel, etc.