High charts grouped bars getting clipped in columns

Question

I am pretty new to Highcharts and i have below questions.

JsFiddle : https://jsfiddle.net/j5xnghde/5/

The columns for Jun and August months are getting clipped. It does not show the Tokyo column for June and Newyork column for August month.
How can i format the months on the xAxis to just display the short month format ? Instead of Jun'20 just display Jun.
When each of the column group is clicked how do i get the corresponding date object associated to it ?
Right now the cross hair is showing as a thin line in between the grouped columns. How can i span over the entire column ?

EDIT: Figured out the solution to the first 3 questions.

Question 1:

 xAxis: {
            minPadding: 0.15,
            maxPadding: 0.15,
            allowDecimals: false
        },

Question: 2

labels: {
          format: '{value:%b}'
        },

Question: 3

Need to get the category like below.

category = event.point.category;

Edited Fiddle: https://jsfiddle.net/j5xnghde/6/

As I understand questions 1-3 are fixed. To find a solution for Question 4 - take a look at this topic: https://www.highcharts.com/forum/viewtopic.php?t=37607 — Sebastian Wędzel, Sep 09 '20 at 09:31
@SebastianWędzel - Thanks for the help. Even after setting ````crosshair: true```` the default crosshair does not show up, which is not the problem in all the examples listed here. Would that be because categories are dynamic in my case ? I am setting the XAxis type as 'datetime' — Mohammed Aamir K, Sep 09 '20 at 09:59
@SebastianWędzel - Yes, when the columns are hovered, the crosshair appears as a thin line between the columns and does not span over the entire grouped column. — Mohammed Aamir K, Sep 09 '20 at 10:19
So have you tried to apply the solution from the link which I sent you before? http://jsfiddle.net/d_paul/7ghs7cjn/ — Sebastian Wędzel, Sep 09 '20 at 11:09
@SebastianWędzel - Yes i did, it still does not seem to work. But i see in other examples the default crosshair is already present, which is absent in my case. — Mohammed Aamir K, Sep 10 '20 at 07:10
May I see your attempt of applying this solution in your project? Maybe I will be able to help you with an implement it. — Sebastian Wędzel, Sep 10 '20 at 09:00
@SebastianWędzel - I did try that and the output was not what i desired for. For example you could take a look at the same example here https://jsfiddle.net/vzqmahuL/4/ with the categories on xAxis defined. The cross hair appears fine. But whereas in this example https://jsfiddle.net/vzqmahuL/3/ it appears as a single line instead of spanning across the grouped column. The only difference is i am using type as datetime on the xAxis instead of categories. — Mohammed Aamir K, Sep 11 '20 at 08:11
please check this demo: https://jsfiddle.net/BlackLabel/m6jb5eop/ Is this kind of result satisfy you? — Sebastian Wędzel, Sep 11 '20 at 08:53
@SebastianWędzel - Thanks for this, i did end up doing something along those lines. This does work. But my series data point is dynamic. I could have 12 data points in a series. In that case the svg element is overlapping on the other columns. Although the width is being calculated dynamically why does it not work in the case where the number of data points are 12. You could repro this with the same example by resizing the available with for the columns so that they just sit next to each other. — Mohammed Aamir K, Sep 11 '20 at 09:13
Try to set a very small margin: https://jsfiddle.net/BlackLabel/g1L4m8vc/ — Sebastian Wędzel, Sep 11 '20 at 12:30
@SebastianWędzel - But my original questions still remains. Why would the default cross hair not work ? Why do we have to set a custom svg element ? — Mohammed Aamir K, Sep 11 '20 at 13:17
That's how the crosshair works - for categories crosshair includes the whole category otherwise it needs to be rendered as a custom svg element. — Sebastian Wędzel, Sep 11 '20 at 13:26

High charts grouped bars getting clipped in columns

0 Answers0