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,
},
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,
);
Thanks in advance.