Example shows Simple Chart in Python built using CanvasJS & Django Framework. It also includes view & template source-code that you can try running locally.
<!— index.html —> {% load static %} <html> <head> <title>CanvasJS Python Charts</title> <script src="{% static 'canvasjs.min.js' %}"></script> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, // change to false title:{ text: "Python Column Chart" }, data: [{ type: "column", dataPoints: {{ data_points | safe }} }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="width: 100%; height: 360px;"></div> </body> </html>
#views.py from django.http import HttpResponse from django.shortcuts import render from django.template import loader def index(request): data_points = [ { "label": "apple", "y": 10 }, { "label": "orange", "y": 15 }, { "label": "banana", "y": 25 }, { "label": "mango", "y": 30 }, { "label": "grape", "y": 28 } ] return render(request, 'index.html', { "data_points" : data_points })
You can enable / disable animation of the chart by setting animationEnabled property to boolean. Chart theme can be change to either light or dark by setting theme property. At the same time, colors of all the elements of the chart are customizable by using properties like backgroundColor, title.fontColor, dataSeries.color, labelFontColor & more.