By splitting the data, I meant that if you want to display 3 xAxis labels with each label ranging from 1st to last day of month, your data should fit in this bounds. For example, if you want three labels to look like this: [10/1/2020 - 10/31/2020, 11/1/2020 - 11/30/2020, 12/1/2020 - 12/31/2020] your data should fit in such date ranges.
I noticed that if the xaxis label is too long the label will become hidden when I want it to fit and show. Also in the situation when the yaxis label width changes, I need the corner title to adjust to the center position.
I have updated the solution based on your reply, check it out here: https://jsfiddle.net/BlackLabel/c89tyk3x/
Labels are automatically hidden when there is not enough space for them to render. You could override this behaviour by setting condition.maxWidth
and proper styling, e.g. label width or set label rotation in chart responsive.rules
. Here's a demo of responsive rules in use: https://jsfiddle.net/gh/get/library/pur ... responsive
https://api.highcharts.com/gantt/respon ... artOptions
https://api.highcharts.com/gantt/respon ... n.maxWidth
Let me know if that was what you were looking for.