how to display the title in the middle of a donut chart with legend?(react-highcharts)

Question

I know how to centered it by use this option:

 title: {
    text: "This is title",
    align: "center",
    verticalAlign: "middle",
  },

it works fine , but when there is a legend aligned in right or left , it will not perfectly displayed in the center , to add a x position to adjust it is ok ,but not responsive. when you change the window size , it will has some offsets.

here is the demo: https://stackblitz.com/edit/react-highchart-jjzjx118

I tried use load/redraw to adjust it , but I don't know why it not work when I bind redraw function to react component, I will do some further action in it so I can't define it when I create the option.

score 2 · Accepted Answer · answered Jan 20 '20 at 10:34

You can position a title in a render callback function:

chart: {
    events: {
        render: function() {
            var seriesElPos = this.seriesGroup.getBBox();

            this.title.attr({
                x: seriesElPos.width / 2 + seriesElPos.x
            });
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4760/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

https://api.highcharts.com/highcharts/chart.events.render

how to display the title in the middle of a donut chart with legend?(react-highcharts)

1 Answers1