Lemon
Posts: 12
Joined: Wed May 12, 2021 8:13 am

xAxis labels overlap issue

Hi,
According to API document: https://api.highcharts.com/highstock/xAxis.labels.step, property step is 0 by default and the step is calculated automatically to avoid overlap.
However, xAxis labels sometimes (but not always) do overlap in my project (this situation often happens when there are fewer ticks).
Example: https://imgur.com/U1Jbajv

This is the way I set xAxis options:

Code: Select all

    xAxis: {
      gridLineWidth: 1,
      gridLineColor: 'rgba(230, 230, 230, 0.1)',
      type: 'datetime',
      ordinal: false,
      minTickInterval: 1000 * 60,
      labels: {
        style: { color: '#ffffff', fontSize: '14px' },
      },
      dateTimeLabelFormats: {
        second: { main: '%H:%M:%S' },
        minute: { main: '%H:%M' },
        hour: { main: '%H:%M' },
        day: { main: '%H:%M' },
        week: { main: '%H:%M' },
        month: { main: '%H:%M' },
        year: { main: '%H:%M' },
      },
      crosshair: false,
    },
After receiving data from request, I would immediately update xAxis and navigator:

Code: Select all

chart.xAxis[0].update(
            {
              min: openTime, // -> at 15:00, ex: 1636556400000
              max: closeTime, // -> at 13:45, ex: 1636638300000
              breaks: [
                {
                  from: sessionGapS, // -> at 05:00:01, ex: 1636606801000
                  to: sessionGapE, // -> at 08:44:59, ex: 1636620299000
                },
              ],
            },
            true,
);

chart.update(
            {
              navigator: {
                xAxis: {
                  breaks: [
                    {
                      from: sessionGapS, // -> at 05:00:01, ex: 1636606801000
                      to: sessionGapE, // -> at 08:44:59, ex: 1636620299000
                    },
                  ],
                },
              },
            },
            true,
);
Is there any way to solve this problem?
Thanks in advance.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: xAxis labels overlap issue

Hi,

Thanks for contacting us with your question!

Your code seems to be fine at first glance. It's hard to say what may cause this behaviour especially when it comes up in different situations. Could you please reproduce your example in an online editor that I could work on? You can start here: https://jsfiddle.net/BlackLabel/jetgqs5u/

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Stock”