Menu
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="[email protected]" 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="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="[email protected]" 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="[email protected]" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="[email protected]" 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);
}
};
}
})();
421
If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink . In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis , and normally defined using the flex shorthand.
flex-shrink: 0; The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element. Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.
Since Highcharts 5.0 you can create responsive charts much the same way you work with responsive web pages. A top-level option, responsive, exists in the configuration. One of the most handy options is chart. className that can be used to control the style of all other elements in Highcharts styled mode.
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%)
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
