Example shows Python Donut Chart with indexlabels. It also includes Django source-code that you can try running locally.
<!-- index.html --> {% load static %} <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer",{ theme: "light2", animationEnabled: true, exportEnabled: true, title: { text: "Composition \u2800of Magma", dockInsidePlotArea: true, verticalAlign: "center", maxWidth: 140, fontSize: 22 }, data: [{ type: "doughnut", indexLabel: "{label} - {y}", yValueFormatString: "#,##0.0\"%\"", startAngle: 90, dataPoints: {{ magma_composition_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): magma_composition_data = [ {"label":"Oxygen","symbol":"O","y":46.6}, {"label":"Silicon","symbol":"Si","y":27.7}, {"label":"Aluminium","symbol":"Al","y":13.9}, {"label":"Iron","symbol":"Fe","y":5}, {"label":"Calcium","symbol":"Ca","y":3.6}, {"label":"Sodium","symbol":"Na","y":2.6}, {"label":"Magnesium","symbol":"Mg","y":2.1}, {"label":"Others","symbol":"Others","y":1.5} ] return render(request, 'index.html', { "magma_composition_data" : magma_composition_data })
Inner and outer radius of the Doughnut / Donut Chart can be changed using innerRadius and radius respectively. Some other commonly used customization options are indexLabelPlacement, color, etc.