Lvl 1 labels get messed up when try to see zoom section via drag

Question

Facing issue in Zoom via drag is not working with grouped categories.

Lvl 1 labels get messed up when try to see zoom section via drag

Example - https://jsfiddle.net/5bjzgner/
enter image description here

Code -

Highcharts.chart('container', {
chart
: 
{zoomType: 'xy'},
  xAxis: {
    categories: [
    {
        "categories": data,
labels: {
            groupedOptions: [
              {
                style: {
                  //color: 'red', // set red font for labels in 1st-Level
                },
              },
              {
                align: 'right',
              },
            ],
            formatter: function () {
              const text =
                typeof this.value === 'object' ? this.value.name : this.value;
              const spiltText = text.split(' ');
              if (spiltText[2]) {
                const t2 = spiltText[0] + '-' + spiltText[2].substring(0, 1);
                const index = parseInt(t2.split('-')[0]) > 9 ? 4 : 4;
                const day = t2.substring(0, index).split('-').join('<br />');
               
                return '<span class="day">' + day + '</span>';
              }
              return text;
            },
          },

  },
  
  series: [{
    data: [4, 3, 5, 6, 64, 3, 6, 7, 4, 32, 8, 35, 1, 2, 3, 4, 2, 5, 8, 9, 8, 11, 12, 13,11,56,12,73,50]
  }]

});

Can someone advice any workaround for this?

Thanks!

Answer 1

The problem causing label positions not updating when zooming or changing the chart width is your custom label formatting function (label.formatter()). You can do it much simpler:

Highcharts.chart('container', {
  ...
  xAxis: {
    labels: {
      formatter: function() {
        const text = this.value;

        if (typeof text === 'string') return `${text.substring(0, 2)}<br/>${text.substring(8, 9)}`;
        return text;
      }
    }
  }
});

Demo: https://jsfiddle.net/BlackLabel/r5zn4tuf/