[Solved]-Highcharts heatmap column width based on content size-Highcharts

Making heatmap to behave like HTML table (columns adjust their width to their content) is rather a difficult process - it's explained in my comment under the OP's question.

Here're the steps to make it (I don't guarantee that I'll work):

1. Make each column a separate series (colsize can be applied to a series only and we need a specific colsize for every column)
2. Find the longest label for every column. They need to be generated first so it has to be done in chart.load event. Every point has a reference to its data label (SVG element) - you can find width property there.
3. Use xAxis[0].toValue function to determine the colsize of each column.
4. Find new x values for every column - it depends on the values of spans of previous columns. Update all points.
5. Categories functionality is based on fixed value of tick interval and it won't work for us anymore. xAxis.tickPositions has to be used to place the ticks so they mach the columns. xAxis.labels.formatter can be used for finding the proper names for every x axis label.