i am usig highcharts and in some cases, when the graph have lots of data, some of the data is shown not clear and overleap, is there something to do? like show the datalabeles in diffrent positions over the bar? or switch location every 2 bars? attach picture thanks

i am usig highcharts and in some cases, when the graph have lots of data, some of the data is shown not clear and overleap, is there something to do? like show the datalabeles in diffrent positions over the bar? or switch location every 2 bars? attach picture thanks

• highcharts

1 Answer 1

There are many ways to modify data labels display, please see some API options to consider (the list is longer, please go through the options):

• rotation: https://api.highcharts/highcharts/series.column.dataLabels.rotation
• inside: https://api.highcharts/highcharts/series.column.dataLabels.inside
• align: https://api.highcharts/highcharts/series.column.dataLabels.align

You can also play with font size via https://api.highcharts/highcharts/series.column.dataLabels.style

You can even target the position of a specific point if needed, see an example here: https://jsfiddle/BlackLabel/fp4otydc/

And with the use of dataLabels.formatter option you can apply alternate positions in many ways, one example is here:

dataLabels: {
        enabled: true,
        formatter: function() {
            // Alternate y position for labels
            let yOffset = this.point.index % 2 === 0 ? -10 : 30;
            return `<span style="position: relative; top: ${yOffset}px;">${this.y}</span>`;
        },
        useHTML: true,
        style: {
            fontSize: '13px',
        }
    }

Let me know if that is what you were looking for!