managing gap between candlestick

[tahir]

Hello,

I’m trying to create a candlestick chart with a 15-90 minute interval, but when I render the chart, it shows significant gaps between candlesticks (including non-trading hours). I’m only feeding valid market-hour data, but the chart still displays empty spaces for off-hours.

How can I ensure that only available data points are plotted without gaps? Any guidance would be greatly appreciated.

Thank you!

[Thangaraj Raman]

@tahir,

The date-time axis is linear, hence all dates/times within a date range will be displayed on the x-axis regardless of the data being passed.

To make all candlesticks equidistant, you can pass labels instead of x values for the candlesticks. This way, CanvasJS will automatically distribute them evenly on the x-axis without considering the actual time intervals. However, if your scenario requires using x-values (for accurate timestamps), you can use scaleBreaks to remove the gaps during non-trading hours.

—
Thangaraj Raman
Team CanvasJS

[tahir]

Hello Thangaraj,

Thank you for your prompt response. I tried implementing scaleBreaks to remove gaps during non-trading hours, but I couldn’t achieve the desired result—perhaps there’s an issue with my logic.

Would it be possible for me to share my code so you can help identify what I might be doing wrong?

Looking forward to your guidance.

Best regards,
Tahir

[Thangaraj Raman]

@tahir,

Please create a JSFiddle reproducing the issue that you are facing and share it with us so that we can look into the code, understand the scenario better, and help you out.

—
Thangaraj Raman
Team CanvasJS

[tahir]

Hi Thangaraj,

I created a JSFiddle reproducing the issue, Kindly look into it.

Link: https://jsfiddle.net/p0hqomxg/

Looking forward to your guidance.

Best regards,
Tahir

[Thangaraj Raman]

Tahir,

You can use customBreaks to remove gaps created by weekends and non-trading hours, as shown in this updated JSFiddle.

—
Thangaraj Raman
Team CanvasJS