centering text in highchart pie on responsive

Question

I have a little issue on centering text in a highchart pie chart.

I have this script for a pie chart

var chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'finance-1',
                        type: 'pie'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: '',
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        pie: {
                            borderColor: null,
                            innerSize: '70%',
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    series: [{
                        data: [
                            { y: 64, color: '#283139' },
                            { y: 46, color: '#ebebeb' }
                        ]
                    }]
                },
                // using 

                function (chart1) { // on complete
                    var xpos = '50%';
                    var ypos = '50%';
                    var circleradius = 40;

                    // Render the circle
                    chart1.renderer.circle(xpos, ypos, circleradius).attr({
                        fill: '#fff',
                    }).add();

                    // Render the text 
                    chart1.renderer.text('3.900' + ' kr.', 100, 90).css({
                        width: circleradius * 2,
                        color: '#222',
                        fontSize: '18px',
                        textAlign: 'center',
                        fontFamily: 'dinotmedium',
                    }).attr({
                        // why doesn't zIndex get the text in front of the chart?
                        zIndex: 999
                    }).add();
                });

                var chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'finance-2',
                        type: 'pie',
                        backgroundColor: '#ebebeb'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: '',
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        pie: {
                            borderColor: null,
                            innerSize: '70%',
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    series: [{
                        data: [
                            { y: 86, color: '#fff' },
                            { y: 14, color: '#283139' }
                        ]
                    }]
                },

This works almost as it should, but the text centering is not responsive, - because it is a static position,

chart1.renderer.text('3.900' + ' kr.', 100, 90)

The text will move out of the center when the screen size gets smaller.

How can I position it in the center of the pie chart accordingly to the screen size ?

Answer 1

Fixed it myself

title: {
        text: '3.900 kr',
        verticalAlign: 'top',
        floating: false,
        align: 'center',
        y: 80,
        style: {
           fontFamily: 'dinotmedium',
        }
},

does the same thing and it works perfectly

Answer 2

Use redraw event, to position that text on chart's redraw (including window resize). Important is also to store rendered text in the variable. For example:

// Render the text 
chart1.myText = chart1.renderer.text('3.900' + ' kr.', 100, 90)

And redraw callback:

var chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'finance-1',
    type: 'pie',
    events: {
      redraw: function() {
          if(this.myText) {
              this.myText.attr({  
                x: new_X_position,
                y: new_Y_position,
              });
          }
      }
    }
  },
...
});