Search code examples
cssangularjshighchartsflexboxhighcharts-ng

highcharts-ng grows but doesn't shrink in flexbox

I'm trying to put a highchart in a flexbox container. The chart grows with the container just fine, but it doesn't shrink when the container shrinks.

My project uses angularJS and highcharts-ng, although I'm guessing the problem lies with flexbox itself. It's the same in Chrome and IE at least.

Here's a plunkr that illustrates the issue. If you open the embedded view you'll notice when you make the window wider, both charts reflow to fit. But when you make it narrower, the top chart (in a flexbox), remains unchanged.

I put in the reflow button to broadcast the reflow event for highcharts-ng, but it seems to have no effect.

I'm looking for a workaround or any solution that will still let me use flexbox.

Below is the code from Plunkr. It is based on another plunk by the author of highcharts-ng that solved a similar issue for bootstrap containers.

index.html

<!DOCTYPE html>
<html ng-app="highChartTest">

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />

  </head>

  <body ng-controller="MyHighChart as c">

    <div class="page-container">
      <div class="side-panel">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
          </ul>
        </div>
        <div class="main-panel">
             <highchart id="highchart01" config="c.config" height="300"></highchart>
        </div>
    </div>


   <highchart id="highchart02" config="c.config" height="300"></highchart>

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script data-require="highcharts@4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
    <script data-require="highcharts-ng@0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>

    <script src="app.js"></script>
  </body>

</html>

style.css

.page-container {
  margin: 20px;
  border: 1px solid black;
  display: flex;
}

.side-panel {
  width: 200px;
  flex-shrink: 0;
  background-color: #ddd;
}

.main-panel {
  margin: 10px;
  padding: 20px;
  flex-grow: 1;
  border: 1px solid blue;
}

.highcharts-container {
  width: 100%;
  border: 1px solid red;
}

app.js

(function() {
    angular.module('highChartTest', ['ui.bootstrap', 'highcharts-ng'])
        .controller('MyHighChart', ['$scope', '$timeout', MyHighChart]);

    function MyHighChart($scope, $timeout) {

        $scope.onReflowButtonPressed = function(){
          console.log("broadcasting reflow");
           $scope.$broadcast('highchartsng.reflow');
        }
        var chartId = 'yieldColumns01';
        this.widget = {
            chartId: chartId,
            cols: '12',
            title: 'Reflow Test'
        };

        this.config = {
            options: {
                chart: { type: 'column' },
                legend: {  enabled: false},
            },
            title: { enabled: false, text: ''},
            xAxis: {  categories: ['A', 'B', 'C', 'D', 'E', ] },
            yAxis: {   max: 100},
            series: [{
                name: '2014',
                data: [90.9, 66.1, 55.0, 53.2, 51.2]
            }],
            size: {    height: '300' },
            // function to trigger reflow in bootstrap containers
            // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
            func: function(chart) {
              $timeout(function() {
                chart.reflow();
                  //  //The below is an event that will trigger all instances of charts to reflow
                    //$scope.$broadcast('highchartsng.reflow');
             }, 0);
          }
        };
    }
})();
Solution

  • You can either set a non-relative width or flex-basis on the .main-panel container to help Highcharts figure out the parent element's dimensions.

    I've also removed the width: 100% on .highcharts-container since it wasn't doing anything.

    The original Plunkr works on Safari 9.0.1, so this could be due to differences in how browsers implement the flexbox spec (e.g. related issue with width/height: 100%)