mmtn
Posts: 3
Joined: Wed Dec 14, 2022 1:32 pm

polar chart datalabels overlap with xAxis label

Hello all,

I am trying to create a spider web chart.
When there is a data which is near value as the yAxis max , the datalabels overlap with xAxis label.

How to display all datalabels perfectly?

In actual operation, number of category and data are variable.
So I can't adjust the position of specific data.

DEMO
https://jsfiddle.net/pza1hswy/3/

Thank you.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: polar chart datalabels overlap with xAxis label

Thanks for contacting us with your question!

If you want the dataLabels not to be overlapped, you can try 2 different approaches:

#1 changing plotOptions.series.dataLabels.align and plotOptions.series.dataLabels.verticalAlign
Demo: https://jsfiddle.net/BlackLabel/6jc12a3v/

#2 setting xAxis.labels.distance
Demo: https://jsfiddle.net/BlackLabel/uognayfw/

Let me know if you have any further questions!
Best regards
Jakub
mmtn
Posts: 3
Joined: Wed Dec 14, 2022 1:32 pm

Re: polar chart datalabels overlap with xAxis label

Thank you for answering.

By using distance, most xAxis labels are now displayed.
But some labels are still not displayed.

That labels seems to have been hidden, not overlapped.
If a maximum value is set, the labels will be hidden.

https://jsfiddle.net/ky1dr9zc/2/
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: polar chart datalabels overlap with xAxis label

Thanks for the question!

You're right - it doesn't look as it's supposed to.

I'd recommend you play with pane.size, xAxis.labels.distance, chart.spacing to get the desired result.

Here's a demo: https://jsfiddle.net/BlackLabel/sb4qj8yo/

You just need to experiment with those values to achieve your desired solution.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Usage”