Python Stacked Area 100% Chart using Django

Download Python Django Chart Samples

Python Stacked Area 100% Charts are plotted by stacking one dataseries on top of another. It is similar to Stacked Area Chart except that areas are rendered as a percentage of total value at any given point. Below example shows Python Stacked Area 100% Chart along with Django source-code that you can try running locally.

<!-- index.html -->
{% load static %}
<html>
<head>
<title>CanvasJS Python Charts</title>
<script>
    window.onload = function () {
        var data = {{ electricity_production_data|safe }};
      
        electricityFromFossil = [];
        electricityFromNuclear = [];
        electricityFromRenewables = [];

        for(var i=0; i<data.length; i++) {
          electricityFromFossil.push({ label: data[i].year, y: data[i].fossilfuel });
          electricityFromNuclear.push({ label: data[i].year, y: data[i].nuclear });
          electricityFromRenewables.push({ label: data[i].year, y: data[i].renewables });
        }
        
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            title: {
                text: "Global Electricity Production"
            },
            axisY: {
                title: "Electricity Production (In TWh)",
                valueFormatString: "#,##0'%'",
            },
            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;
                    }

                    e.chart.render();
                }
            },
            data: [{
                type: "stackedArea100",
                name: "Fossil Fuels",
                showInLegend: true,
                yValueFormatString: "#,###.##TWh",
                dataPoints: electricityFromFossil
            }, {
                type: "stackedArea100",
                name: "Nuclear",
                showInLegend: true,
                yValueFormatString: "#,###.##TWh",
                dataPoints: electricityFromNuclear
            }, {
                type: "stackedArea100",
                name: "Renewables",
                showInLegend: true,
                yValueFormatString: "#,###.##TWh",
                dataPoints: electricityFromRenewables
            }]
        });
        chart.render();
    }
</script>
</head>
<body>
    <div id="chartContainer" style="height: 320px; width: 570px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render
import json
import os 

def index(request):
    dir_path = os.path.dirname(os.path.realpath(__file__))
    data = open(dir_path + "/static/electricity-production.json").read()
    electricity_production_data = json.loads(data)
    return render(request, "index.html", { "electricity_production_data": electricity_production_data})

Chart Customizations

You can show the information related to all the datapoints sharing same x-values in tooltip by setting shared property to true. Legends can be enabled for individual dataseries using showInLegend property. Some other frequently used customization options include color, fillOpacity, markerType, etc.