How can i make gauge highchart chart responsive

Question

Please refer below jsfiddle currently litle and legend is not responsive how can i make it responsive [text] without title it works fine but i also want title and legend resonsive in chart Please help me out to make gauge high chart responsive with title as well as legend . I attached below link that i tried to make responsive : [[Demo Link]:

'https://jsfiddle.net/khushbu_mistry/sxu8nfyj/1/'

Please help me out to make it responsive

Answer 1

Since your solution of updating pane.size using load()/render() generates such problems with the responsiveness of the title and legend, I suggest using the default solution, which is the responsive property that allows you to adjust the chart configuration to the appropriate resolution:

Highcharts.chart('container', {
  ...
  responsive: {
    rules: [{
      condition: {
        maxWidth: 630
      },
      chartOptions: {
        chart: {
            height: 300
        },
        pane: [{
          center: ['50%', '95%'],
          size: '180%',
        }],
      }
    }]
  }
});

Demo: https://jsfiddle.net/BlackLabel/1tf93mo2/
API: https://api.highcharts.com/highcharts/responsive