title: Responsive Line Chart using High Charts & Bootstrap 3
body: <p>Currently I have my HighChart Line Graph as follows:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  
      var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];
  
      // Chart data
      var seriesData = [{
          name: 'Total Accounts',
          data: [5, 9, 12, 15, 17, 22, 28, 30, 34, 36, 38, 46]
      }, {
          name: 'Total Songs',
          data: [2, 3, 4, 5, 8, 12, 17, 23, 30, 34, 44]
      }, {
          name: 'Total Recordings',
          data: [15, 19, 22, 29, 32, 34, 36, 40, 42, 44, 45]
      }, {
          name: 'Total Writers',
          data: [11, 13, 15, 18, 24, 28, 30, 34, 38, 40, 42, 45]
      }];
  
      var dashboardChart = $('#dashboard_chart');
      if (dashboardChart.length) {
          dashboardChart.highcharts({
              credits: false,
              colors: highColors,
              chart: {
                  backgroundColor: 'white',
                  className: '',
                  type: 'line',
                  zoomType: 'x',
                  panning: true,
                  panKey: 'shift',
                  marginTop: 45,
                  marginRight: 1,
              },
              title: {
                  text: null
              },
              xAxis: {
                  gridLineColor: '#EEE',
                  lineColor: '#EEE',
                  tickColor: '#EEE',
                  categories: ['Jan', 'Feb', 'Mar', 'Apr',
                      'May', 'Jun', 'Jul', 'Aug',
                      'Sep', 'Oct', 'Nov', 'Dec'
                  ]
              },
              yAxis: {
                  min: 0,
                  tickInterval: 5,
                  gridLineColor: '#EEE',
                  title: {
                      text: 'Total'
                  }
              },
              plotOptions: {
                  spline: {
                      lineWidth: 3,
                  },
                  area: {
                      fillOpacity: 0.2
                  }
              },
              exporting: {
                  enabled: false
              },
              legend: {
                  enabled: true,
                  floating: false,
                  align: 'right',
                  verticalAlign: 'top',
                  x: -5
              },
              series: seriesData
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is how its displayed in my HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
          &lt;div id="dashboard_chart" style="height: 500px; width:100%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The main issue is that the graph does not fit the whole container for the tablet in both portrait and landscape. Does anyone have any suggestions? As to how I could make it responsive without adding in-line styles?</p>