Python Area Chart with Markers

Download Python Django Chart Samples

Example shows Python Area Chart with circular markers shown on all datapoints. Library supports multiple marker types like circle, square, triangle & cross. Demo 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",{
      animationEnabled: true,
      theme: "light2",
      title:{
        text: "Python Area Chart"
      },
      data: [{        
        type: "area",
        indexLabelFontSize: 16,
        dataPoints: {{ datapoints|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):
  datapoints = [
    { "y": 480 },
    { "y": 454},
    { "y": 560, "indexLabel": "\u2191 highest", "markerColor": "red", "markerType": "triangle" },
    { "y": 460 },
    { "y": 480 },
    { "y": 520 },
    { "y": 490 },
    { "y": 440 },
    { "y": 420 , "indexLabel": "\u2193 lowest", "markerColor": "DarkSlateGrey", "markerType": "cross" },
    { "y": 520 },
    { "y": 490 },
    { "y": 510 }
  ]

  return render(request, 'index.html', { "datapoints" : datapoints })

Chart Customizations

Marker type of entire dataseries can be changed by setting markerType property in dataseries level. It can be overridden in datapoint level to show different markerType for datapoint. Some other commonly used customization in area chart includes fillOpacity, lineColor, lineThickness, etc.