2

I'm trying to create a full responsive highchart's pie chart in angular that is inside a div that is hidden with ng-show.

I've read similar questions about how to use jquery to fix this issue: (one, two, three)

I have tried:

  1. $(window).resize() but it didn't work
  2. $scope.$apply() worked, but it's keeps throwing an already digest cycle error
  3. I can specify the width using the high chart's property width : "string", but the chart will not be responsive and stay with the same width all the time.

Here is a Plunker of the error

Note: Just make the view window large enough, so that when you press the button you can see, that the chart is on top of the div.

Community
  • 1
  • 1
David Sttivend
  • 325
  • 1
  • 6
  • 16

1 Answers1

2

Its better to use one of the angular wrappers for highstocks like https://github.com/pablojim/highcharts-ng or create a directive like below to serve the purpose 

<div high-chart id="chart" chartData="chart" style="height: 400px; min-width: 310px">
</div>

Bind the data to the 'chart' in the controller and create the directive ,

.directive('highChart',function(){

      return{
        restrict:'A',
        scope:{
          chart:'=chartdata'
        },
        link:function(scope,element,attrs){
          scope.$watch('chart',function(newV){
            if(newV){
            $('#chart').highcharts('StockChart', {
                rangeSelector : {
                    inputEnabled: $('#chart').width() > 480,
                    selected : 1
                },

                title : {
                    text : 'AAPL Stock Price'
                },

                series : [{
                    type : 'scatter',
                    name : 'AAPL Stock Price',
                    data : newV,
                    dataGrouping : {
                        units : [
                            [
                                'week', // unit name
                                [1] // allowed multiples
                            ], [
                                'month',
                                [1, 2, 3, 4, 6]
                            ]
                        ]
                    }
                }]
            });
            }
          })
        }
      }
    })

Hope that helps .

32teeths
  • 1,469
  • 1
  • 15
  • 32
  • thanks for the answer, i would try this and tell you if it works – David Sttivend Nov 13 '14 at 12:04
  • hi @32teeths i tried with highcharts-ng but it isn't resposnive, he use the approach of the fixed width, and i couldn't find a example on the internet of his directive with a responsive behavior, thanks for the help – David Sttivend Nov 13 '14 at 14:24