Python Stacked Column 100% Charts

Download Python Django Chart Samples

Python Stacked Column 100% Charts are used to show relation between individual values to the total sum in terms of percentage. Below example shows Python Stacked Column 100% chart along with 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", {
      animationEnabled: true,
      exportEnabled: true,
      theme: "light2",
      title:{
        text: "Users by Country and Age Breakdown"
      },
      axisY:{
        suffix: "%"
      },
      axisX: {
        labelAngle: 0,
        labelTextAlign: "center"
      },
      toolTip: {
        shared: true
      },
      data: [{
        type: "stackedColumn100",
        name: "18-24",
        showInLegend: true,
        color: "#1565C0",
        toolTipContent: "{label} <br/> <span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
        dataPoints: {{ user_group_18_data|safe }}
      },{
        type: "stackedColumn100",
        name: "25-34",
        showInLegend: true,
        color: "#2196F3",
        toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
        dataPoints: {{ user_group_25_data|safe }}
      },{
        type: "stackedColumn100",
        name: "35+",
        showInLegend: true,
        color: "#64B5F6",
        toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
        dataPoints: {{ user_group_35_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):
  user_group_18_data = [
    { "label": "United States of America", "y": 15426 },
    { "label": "Germany", "y": 2540 },
    { "label": "Canada", "y": 1058 },
    { "label": "United Kingdom", "y": 3500 },
    { "label": "India", "y": 10546 },
    { "label": "China", "y": 9580 }
  ]

  user_group_25_data = [
    { "label": "United States of America", "y": 17486 },
    { "label": "Germany", "y": 2680 },
    { "label": "Canada", "y": 1350 },
    { "label": "United Kingdom", "y": 3870 },
    { "label": "India", "y": 14546 },
    { "label": "China", "y": 9790 }
  ]

  user_group_35_data = [
    { "label": "United States of America", "y": 12687 },
    { "label": "Germany", "y": 2050 },
    { "label": "Canada", "y": 950 },
    { "label": "United Kingdom", "y": 3240 },
    { "label": "India", "y": 9546 },
    { "label": "China", "y": 8750 }
  ]

  return render(request, 'index.html', { "user_group_18_data" : user_group_18_data, "user_group_25_data": user_group_25_data, "user_group_35_data": user_group_35_data })

Chart Customizations

Color of dataseries can be changed by setting color property. Format of x-value & y-value shown in tooltip can be customized using xValueFormatString & yValueFormatString properties.