Fullscreen panel bootstrap with highcharts (responsive)

Question

I have several (bootstrap) panels where I would like to have the opportunity to show this fullscreen. Highcharts charts are present in these panels. The problem is that the size of the high charts does not adapt when you are going in full screen mode. Is there a possibility to automatically adjust the scaling so that the ratio remains the same?

In this example I have made a start where the problem can be seen.

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
              ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  //Toggle fullscreen
  $("#panel-fullscreen").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full')) {
      $this.children('i').removeClass('glyphicon-resize-full');
      $this.children('i').addClass('glyphicon-resize-small');
    } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
      $this.children('i').removeClass('glyphicon-resize-small');
      $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
  });
});



Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

CSS

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

Hopefully someone can help me further on this. Thank you very much.

Answer 1

If the aspect ratio were fixed, you could probably handle this with the viewbox attribute on the svg. But in this case, I'd opt to wrap the Highcharts draw in its own function, and call that on load and whenever the button is clicked. This would redraw the chart, so that you don't end up with that distorted/"zoomed-in" look when it resizes--instead, you would have the chart drawn as best fits the new space.

If you don't like the redraw transitions, you could have a draw function (executed initially) and a redraw function that is defined without the transitions (executed within the #panel-fullscreen click handler).

With only resize, you often end up with overlapping tick marks/shapes, which can be avoided by drawing to scale within the new space.

$(document).ready(function() {
  //Toggle fullscreen
  $("#panel-fullscreen").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full')) {
      $this.children('i').removeClass('glyphicon-resize-full');
      $this.children('i').addClass('glyphicon-resize-small');
    } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
      $this.children('i').removeClass('glyphicon-resize-small');
      $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
    drawChart();
  });
});
drawChart();

function drawChart() {
	
Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

}

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus, ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Is that how you want it ?

$(document).ready(function() {
  //Toggle fullscreen
  $("#panel-fullscreen").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full')) {
      $this.children('i').removeClass('glyphicon-resize-full');
      $this.children('i').addClass('glyphicon-resize-small');
    } else if ($this.children('i').hasClass('glyphicon-resize-small')) {
      $this.children('i').removeClass('glyphicon-resize-small');
      $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
  });
});



Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}


.panel-fullscreen .highcharts-container {
  width: 100% !important;
  height: 100% !important;
}


.panel-fullscreen .highcharts-container, .panel-fullscreen .highcharts-root {
  width: 100% !important;
  height: 100% !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-xs-8">
      <h2>Fullscreen toggle</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel title</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div class="col-lg-8 col-md-8 col-xs-8">
            <div id="container"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-xs-4">
            <h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus, ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>