Python Candlestick Chart using Django

Download Python Django Chart Samples

Python Candlestick Charts are a type of financial charts that are used to represent price movements in stock market, etc. Below example shows Python Candlestick Chart with Open, High, Low & Close price of the stock. It also includes 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 chart = new CanvasJS.Chart("chartContainer", {
      theme: "light1",
      exportEnabled: true,
      zoomEnabled: true,
      title: {
        text: "ACME Corp. Stock Price"
      },
      axisY: {
        prefix: "$"
      },
      data: [{
        type: "candlestick",
        yValueFormatString: "$#,##0.00",
        xValueFormatString: "MMM DD, YYYY",
        xValueType: "dateTime",
        dataPoints: {{ acme_stock_data|safe }}
      }]
    });
    chart.render();
  }
</script>
</head>
<body>
  <div id="chartContainer" style="height: 360px; width: 100%"></div>
  <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>                              
from django.shortcuts import render

def index(request):
    acme_stock_data = [
        { "x":1640995200000, "y": [2365,2567.300049,2305,2386.600098] },
        { "x":1643673600000, "y": [2408,2456.399902,2243,2359.550049] },
        { "x":1646092800000, "y": [2359.550049,2688,2180,2634.75] },
        { "x":1648771200000, "y": [2636,2856.149902,2521.800049,2790.25] },
        { "x":1651363200000, "y": [2762,2805.5,2370,2632.649902] },
        { "x":1654041600000, "y": [2634.300049,2817.350098,2445,2595.649902] },
        { "x":1656633600000, "y": [2574.899902,2592,2365,2509.449951] },
        { "x":1659312000000, "y": [2519.149902,2676.899902,2507.600098,2637.949951] },
        { "x":1661990400000, "y": [2582.649902,2629.699951,2311,2377.75] },
        { "x":1664582400000, "y": [2391.5,2560.949951,2343.100098,2549.600098] },
        { "x":1667260800000, "y": [2600,2745.449951,2502,2731.350098] },
        { "x":1669852800000, "y": [2741.800049,2755,2585,2613.100098 ]}
    ]

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

Chart Customizations

Crosshair helps in detailed analysis of the chart & can be enabled by setting enabled property to true. Color & font-styling of crosshair can be changed by setting color, labelFontColor, labelBackgroundColor, etc.