Search code examples
highchartssunburst-diagram

High charts sunburst text misalignment

I am trying out a sunburst chart using React highcharts and came up with a misalignment issue. If someone has faced this issue before and found a solution, it would be really helpful to me.

Here is the Codesandbox link

Below is the output of the image. Here 'All' text thats displayed in the center seems to be misaligned ( it needs to be moved a bit downwards).

Thanks in advance.

enter image description here

Solution

  • The easiest and fastest solution will be to set a proper dataLabels.y value based on font-size of current dataLabel.

    Live demo: https://codesandbox.io/s/highcharts-react-simple-chart-forked-inwvzy

    API Reference https://api.highcharts.com/highcharts/series.sunburst.dataLabels.y