When I use xAxis categories with breaks the label of xAxis, overlay like the example below. Does it have a solution? A way to stop the overlay. Is there a way to use breaks with xAxis.categories?
Example: Breaks bug
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
alignTicks:false,
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'left',
verticalAlign: 'top',
x: 10,
y: 10
},
relativeTo: 'chart'
},
},
xAxis: {
categories: ["2022-06-06","2022-06-07","2022-06-08","2022-06-09","2022-06-10","2022-06-11","2022-06-12","2022-06-13"],
breaks:[{
from:2,
to:3
}]
},
yAxis:{
title:{
text : '%'
},
max: 100,
},
series: [{
color: "#e88307",
type: "spline",
data: [99.68,99.69,99.68,99.62,99.62,99.59,99.57,99.67]
},{
color: "#9d07e8",
type: "spline",
data: [99.89,99.89,99.89,99.88,99.88,99.88,99.88,99.89]
},{
color: "#0738e8",
type: "spline",
data: [98.86,98.85,98.94,98.55,97.42,96.75,96.79,96.46]
},{
color: "#07e838",
type: "spline",
data: [98.4352499872,98.4351670785,98.5149062688,98.057699388,96.9333442352,96.23770101,96.2581544364,96.0359261498]
}]
});
Responsive rules should work here to change way of show labels, you can use xAxis.labels.rotation, xAxis.labels.step or xAxis.labels.staggerLines.
responsive: {
rules: [{
condition: {
maxWidth: 1000
},
chartOptions: {
xAxis: {
labels: {
rotation: -45,
}
}
}
}]
}