Home Forums Chart Support combining candlestick chart and line chart (moving average line) Reply To: combining candlestick chart and line chart (moving average line)



Thank you for your interest in CanvasJS.
Yes, it can be done. You can combine Candlestick chart with Spline chart, where spline represents the moving averages. You can loop through the candlestick series and use its corresponding dataPoints to dynamically calculate the spline series as shown in the code snippet below –

function calculateMovingAverage(chart) {

  // return if there are insufficient dataPoints
  if(chart.options.data[0].dataPoints.length <= 5) return;
  else {
    // Add a new line series for  Moving Averages
      type: "spline",
      markerSize: 0,
      name: "SMA",
      dataPoints: []
    var total;
    for(var i = 5; i < chart.options.data[0].dataPoints.length; i++) {
      total = 0;
      for(var j = (i - 5); j < i; j++) {
        total += chart.options.data[0].dataPoints[j].y[3];
        x: chart.options.data[0].dataPoints[i].x,
        y: total / 5

Please have a look at this JSFiddle for a working example.

Simple moving average

Suyash Singh
Team CanvasJS