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.

enter image description here

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

enter image description here

(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):

enter image description here

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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -