xAxis label is not visible properly in Highcharts

Question

if I have a large amount of data then the xAxis label is not showing properly. you can see in this code: https://jsfiddle.net/4nvmuc25/127/

if I have a low amount of data then it's fine my xAxis label is showing correctly.

so I want to show the xAxis label properly if I have a large amount of data.

Restriction: 1:you can't change the rotation property for xAxis. 2:xAxis labels should not intercept each other. 3:you can't do by css.

Not restriction: you can set tickInterval, step property in xAxis but remember the amount of data is dynamic, it could be any number.

nope we can`t do this because labels is only one word (like Jan-21). if we break it then its not readble for users — , Jul 16 '21 at 08:06
okay there is no enough space for the labels of such fonts to fit in either break or decrease the font size or increase the width of the chart — Krishna Kanth, Jul 16 '21 at 08:34

score 0 · Accepted Answer · answered Jul 16 '21 at 14:54

You should not use category x-axis type in this case. In API we can read:

step: number

... By default, when 0, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.

As a solution use linear axis with a custom formatter function for labels:

const labels = [
    "Apr-1",
    "May-2",
    ...
];

Highcharts.chart('container', {
    xAxis: {
        ...,
        labels: {
            ...,
            formatter: function() {
                return labels[this.pos]
            }
    },
    ...
});

Live demo: https://jsfiddle.net/BlackLabel/Lk8aogpq/

API Reference: https://api.highcharts.com/highcharts/xAxis.labels

xAxis label is not visible properly in Highcharts

1 Answers1