Candlesticks and close prices

[lukep]

I wrote a sample code for 10 candlesticks. It also includes a line for the close prices. But the close line doesn’t match the close prices in the candlesticks. Any idea why? Thanks for your time!

The short script is here: https://jsfiddle.net/roj5dvnb/

• This topic was modified 2 hours, 12 minutes ago by Manoj Mohan.
• This topic was modified 2 hours, 10 minutes ago by lukep.

[Manoj Mohan]

@lukep,

In the shared example, the line and candlestick charts are plotted on different axes, i.e., the primary and secondary y-axes, and their ranges are not aligned with each other. Because of this, it visually appears that the close line and close prices do not match. To overcome this, you can sync the ranges of both axes using the viewportMinimum and viewportMaximum properties of the y-axis, as shown in the code snippet below.

function syncYAxesRange(chart) {
  var viewportMinimum = +Infinity, viewportMaximum = -Infinity;

  if(chart.axisY)
    chart.axisY.forEach((axis) => {
      viewportMaximum = Math.max(axis.viewportMaximum, viewportMaximum);
      viewportMinimum = Math.min(axis.viewportMinimum, viewportMinimum);
    })

  if(chart.axisY2)
    chart.axisY2.forEach((axis) => {
      viewportMaximum = Math.max(axis.viewportMaximum, viewportMaximum);
      viewportMinimum = Math.min(axis.viewportMinimum, viewportMinimum);
    })

  if(chart.axisY)
    chart.axisY.forEach(axis => {
      axis.set("viewportMaximum", viewportMaximum, false);
      axis.set("viewportMinimum", viewportMinimum);
    })

  if(chart.axisY2)
    chart.axisY2.forEach((axis) => {
      axis.set("viewportMaximum", viewportMaximum, false);
      axis.set("viewportMinimum", viewportMinimum);
    })
}
syncYAxesRange(chart);

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS