High performance best practice?

Question

What is the best way to achieve continuous calibration, where:

• it reacts with respect to name and basic font values ​​/ sizes
• the title can be carried over several lines,
• also without leaving the registration shown in the screenshot below

Screenshot (desktop and mobile):

Notes:

• This is based on the official example of tall charts here .

Here is my options code (from gaugeComponent.ts):

var options: any = {
    chart: {
      type: 'solidgauge'
    },
    title: null,
    pane: {
      center: ['50%', '55%'],
      // size: '140%',
      startAngle: -140,
      endAngle: 140,
      background: {
          backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    // the value axis
    yAxis: {
      min: 0,
      max: 100,     
      stops: stops,
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      className: 'highcharts-gauge-heading',
      title: {
        text: this.gauge.title,
        y: -80,
      },
      labels: {
          x: -5,
          y: 30
      }
    },      

    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: -30,
          borderWidth: 0,
          useHTML: true
        }
      }
    },

    credits: {
      enabled: false
    },

    series: [{
      name: this.gauge.title,
      data: [this.gauge.value],
      dataLabels: {
        format: '<div style="text-align:left"><span style="font-size:30px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>'
      }
    }],

    responsive: {
      rules: [{
        condition: {
          maxWidth: 300
        },
        chartOptions: {
          yAxis: {           
            className: 'highcharts-gauge-heading-small' 
          }
        }
      }]
    }        
}