javascript - How to build a responsive thermometer panel using highcharts -

hey trying build thermometer panel using highcharts. way build it: build several thermometers , single thermometer(which actual column graph circle drawing in end of chart).

the thermometer factory service, called function generate chart of service in order generate thermometer graph.

so far have succeeded in above task,but component isn't responsive in laptops or tablets.

i using bootstrap , considering moving flexbox instead, need guidance responsive problem come , how solved it.

edit: i think best way handle problem unit thermometer panel 1 graph instead of 4 separated graphs, question is: how can it?

here code:

a codepen of code:http://codepen.io/barak/pen/jrdrxv

var app = angular.module("app",[]);    app.controller("mainctrl", ["$scope","thermometer",function($scope,thermometer){    $scope.title = "hello world";      var chartthermo1        = thermometer.generatechart("thermometer1","a00");      var chartthermo2        = thermometer.generatechart("thermometer2","b03");      var chartthermo3        = thermometer.generatechart("thermometer3","c04");      var chartthermo4        = thermometer.generatechart("thermometer4", "to");                               }])    app.factory('thermometer', function () {          var thermometer = {};          thermometer.generatechart = function (containerid,title) {              var chart = new highcharts.chart({                  chart: {                      marginbottom: 50,                      renderto: containerid                  },                  series: [{                      data: [70],                      type: 'column',                      pointwidth: 20,                      threshold: -40,                      borderwidth: 0,                      name: 'temp'                  }],                  credits: {                      enabled: false                  },                  legend: {                      enabled: false                  },                  xaxis: {                      labels: {                          enabled: false                      },                      linewidth: 0,                      tickwidth: 0                  },                  yaxis: {                      min: 0,                      max: 150,                      minpadding: 0,                      maxpadding: 0,                      startontick: false,                      endontick: false,                      title: {                          text: ''                      },                      tickinterval: 75,                      minortickinterval: 1,                      gridlinewidth: 0,                      minorgridlinewidth: 0,                      tickwidth: 1,                      minortickwidth: 1                  },                  title: {                      text: title                  }                }, function (chart) {                  // draw shape                  var series = chart.series[0],                      point = series.points[0],                      radius = 20;                  chart.renderer.circle(                      chart.plotleft + point.shapeargs.x + (point.shapeargs.width / 2),                      chart.plottop + series.yaxis.len + radius - 5,                      20                  )                  .attr({                      fill: series.color                  })                  .add();              });              return chart;          }          return thermometer;        });

.thermometer{      display: inline-block;      height: 280px;      width: 80px;      margin: 1em auto;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.6/highcharts.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="mainctrl">     <div class="container-fluid">      <div class="row">        <div class="col-lg-3 col-md-3">           <div id="thermometer1" class="thermometer flex-item"></div>           <div id="thermometer2" class="thermometer flex-item"></div>           <div id="thermometer3" class="thermometer flex-item"></div>           <div id="thermometer4" class="thermometer flex-item"></div>        </div>      </div>      </div>  </div>