Candlestick chart: How to remove gaps if there are no data (OHLC) on some date-time intervals
See original GitHub issueBefore submitting this issue, I have already read the docs about this problem but had no luck to find the option that let me remove gaps if some date-time intervals are missing.
Is your feature request related to a problem? Please describe. When I plot stock price data, there are gaps in some DateTime intervals because stock price data is only available on the days that the market opens. There will be no candlestick data in the days market closes.
For example, if I plot stock prices in a range of the last 7 days, and the date-time interval is 1 day. I would have gaps on Saturday and Sunday because these are the days market closes.
Describe the solution you’d like
Allow us to remove or skip date-time intervals that there are no OHLC data. Something similar to spanGaps
in Chart.js
Additional context This is what the library does for me to render stock prices with a range of 7 days and 1-day intervals (no data on Sat. and Sun.) See on Codepen here: https://codepen.io/aptarmy/pen/VwYyoyj
This is the result I would like to have (skip those with no data)
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (2 by maintainers)
Top GitHub Comments
What setting precisely makes the candlestick chart not render gaps? I still see gaps from the 2 days on each weekend on my chart and I have taken the exact option parameters as given by your example here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/category-x-axis/
Anyone else having the same issues or am I just missing out something that is very very obvious to everyone else? 😄
EDIT: I noticed when adding a debugger in the formatter function, val is shown as undefined. I was trying to figure out why the x-axis also renders the dates in a very close timespan (like the days around present) - whereas the data I use reaches back to a year. I used timestamps with both a multiple of 1000 and without, both leading to the same erroneous x-axis.
xaxis: { type: 'category', labels: { formatter: function(val) { debugger; // shows val is undefined in brower dev console return dayjs(val).format('MMM DD HH:mm') } } },
I have enabled zooming on category x-axis since v3.15.0 which will help to solve the issue of gaps.
Live example - https://apexcharts.com/javascript-chart-demos/candlestick-charts/category-x-axis/