Gauge highcharts is not resize with ionic 2

Question

I have made this far but i am not able to make it responsive(resize) as it is fixed on same width and height on even window resize.

I have tried to some bootstrap module but still i am facing the issue to set this highchart in screen size

challengedash.ts

    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import * as Highcharts from 'highcharts';
    import * as HighchartsMore from 'highcharts/highcharts-more';
    HighchartsMore(Highcharts);

    @Component({
       selector: 'page-challengedash',
       templateUrl: 'challengedash.html'
    })

export class ChallengedashPage {

   tabBarElement: any;
  checkindata: Array<{title: string, subtitle: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController) {


    /*high chart 2 options*/
    this.chart2 = {
      chart:{
        type:'gauge',
      },
      title: {
        text: 'PV Generation'
      },
      tooltip: {
        enabled: false
      },

      pane: {
        center: ['50%', '55%'],
        size: '100%',
        startAngle: -150,
        endAngle: 150,
        background: {
          backgroundColor: 'transparent',
          innerRadius: '100%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0,
        },


      },
      plotOptions: {
        gauge: {
          pivot: {
            radius: 60,
            borderWidth: 0,
            borderColor: null,
            backgroundColor: {
              linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
              stops: [
                [0, 'white'],
                [1, 'white']
              ]
            }
          }
        }
      },
      yAxis: [{

        min: 0,
        max: 250,
        minorTickInterval: 2,
        minorTickLength: 50,
        minorTickWidth: 1,
        offset:-10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval:100,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength:-10,
        tickColor: '#fff',
        lineWidth :0,

        labels: {
          step: 1,
          distance: 20,
          rotation: 'auto',
        },

        plotBands: [{
          from: 0,
          to: 120,
          color: '#55BF3B' // green
        }, {
          from: 120,
          to: 160,
          color: '#DDDF0D' // yellow
        }, {
          from: 160,
          to: 200,
          color: '#DF5353' // red
        }],

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

      }],

      series: [{
        name: 'Speed',
        data: [10],
        tooltip: {
          valueSuffix: ' km/h'
        },

      }]
    };
    /**/
  }

  chart2: Object;


}

Out put of above

But i want to get the graph fit to the screen size

My Html Code

<chart class="my-gauge-chart" [options]="chart2" > </chart>

Answer 1

Yeah , i have solved it by using this

@Component({
  selector: 'page-challengedash',
  templateUrl: 'challengedash.html',
  styles: [`
    chart {
        display: block;
        width: auto;
    }
`]
})

check the screen shot