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/

1. 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.

2. How can i format the months on the xAxis to just display the short month format ? Instead of Jun'20 just display Jun.

3. When each of the column group is clicked how do i get the corresponding date object associated to it ?

4. 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/