javascript - Angular HighChart in tabs width -
okay have following highchart tag:
<highchart id="chart1" config="chartconfig" ></highchart> now in system have several tabs. happens high chart not under first tab.

now when press tab contains chart, chart looks abit odd:

(you can't tell picture using 30% of total width)
but change browser size , changing normal chart places self correctly inside element (this happens if open console while inside tab):

i guessing has width of element once has been created (maybe because within tab) unsure how fix this.
i attempted put style on element containg highchart this: <highchart id="chart1" config="chartconfig style="width: 100%"></highchart>
however resulted in chart running out of frame.
my chart config
$scope.chartconfig = { }; $scope.$watchgroup(['login_data'], function(newvalues, oldvalues) { // newvalues[0] --> $scope.line // newvalues[1] --> $scope.bar if(newvalues !== oldvalues) { $scope.chartconfig = { options: { chart: { type: 'areaspline' } }, series: [{ data: $scope.login_data, type: 'line', name: 'aktivitet' }], xaxis: { categories: $scope.login_ticks }, title: { text: '' }, loading: false } } });
can try 1 of following in controller? (or perhaps both!)
$timeout(function() { $scope.chartconfig.redraw(); }); $timeout(function() { $scope.chartconfig.setsize(); });
Comments
Post a Comment