Python Line Chart with Stripline / Trendline

Download Python Django Chart Samples

Example shows Python Line Chart with stripline / trend-line. Trendlines are used to highlight or mark a certain region in the plot-area. Demo also includes Django MVT 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",
    title: {
      text: "Step Count Over a Week"
    },
    axisY: {
      title: "Number of Steps",
      stripLines: [{
        value: 10000,
        label: "Goal"
      }]
    },
    data: [{
      type: "line",
      yValueFormatString: "#,### Steps",
      dataPoints: {{ stepcount|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):

  stepcount = [
    { "y": 10560, "label":"Sunday" },
    { "y": 9060, "label":"Monday" },
    { "y": 6650, "label":"Tuesday" },
    { "y": 8305, "label":"Wednesday" },
    { "y": 8531, "label":"Thursday" },
    { "y": 10150, "label":"Friday" },
    { "y": 8921, "label":"Saturday" }
  ]
  
  return render(request, 'index.html', { "stepcount": stepcount })

Chart Customizations

In line chart, dash-type of the line can be changed using lineDashType property in dataseries level. Similarly, dash-type of striplines also be changed using lineDashType property in stripline.