Search code examples
javascripthighchartspositioningcenteringdonut-chart

Center Highcharts tooltip in the middle of donut chart in a responsive way

In Highcharts, I know you can put your tooltip in a fixed position using: 

        tooltip: {
          positioner: function () {
              return { x: 50, y: 50 };
          },
        },

But how would I center it in the same way that margin: 0 auto would center it? I am trying to get the tooltip text to stay in the middle of a donut chart. The solution is probably something obvious but I have yet to figure out what it is. Thanks in advance!

Solution

  • You can make use of chart plotHeight and plotWidth to get access to current chart height and width and adjust the tooltip x and y accordingly as below:

    positioner:function(){              
 return { x: chart.plotWidth/2, y: chart.plotHeight/2 };
}

    A working demo here: https://angular-raebwk.stackblitz.io