title: How to make responsive highchart?
body: <p>I created a bar chart with Highcharts and stored it in the column col-md-12 using bootstrap, I set the width of this chart so that it is 100%, but it's width even exceeds col-md-12.</p>
  
  <p><a href="https://i.stack.imgur.com/738eH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/738eH.png" alt="enter image description here"></a></p>
  
  <p>here is my code: </p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div id="kanwil-report-kepuasan" style="width: 100%; min-height: 330px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the Highcharts code :</p>
  
  <pre><code>$('#kanwil-report-kepuasan').highcharts({
          chart: {
                  type: 'column'
              },
              colors: ['#3498DB'],
              title: {
                  text: 'Index Kepuasan Nasabah Berdasarkan Kanwil'
              },
              xAxis: {
                  type: 'category',
                   title: {
                      text: ' '
                  }
              },
  
              legend: {
                  enabled: false
              },
  
              plotOptions: {
                  series: {
                      borderWidth: 0,
                      dataLabels: {
                          enabled: true
                      }
                  }
              },
              yAxis: {
                   // tickPositioner: function() {
                   //        return [0,10];
                   //    },
                   gridLineWidth: 0,
  
                  title: {
                      text: 'Persentase'
                  }
  
              },
              credits:{
                  enabled:false
              },
  
              series: [{
                  name: 'Score',
                  colorByPoint: true,
                  data: {!! json_encode($kanwil_index_data_kepuasan,JSON_NUMERIC_CHECK) !!}   
              }]
      });
  </code></pre>