C3 Chart resize in angular directive

Question

I currently have a simple donut chart that I created with C3. I have put it inside a directive and all works fine.

My directive is as follows:

angular.module('dashboardApp').directive('donutChart',function(){       

    function link(scope,element,attr){      


        scope.$watch(function() {

            return scope.data;
         },
            function() {                    
                if(scope.data !== undefined){                       

                    var chart  = c3.generate({
                        bindto: 'donut-chart',
                        data:{
                            columns : scope.data,                           
                            type: 'donut'
                            },
                        donut:{
                            label : {
                                format: function(value,ratio,id){
                                    return value;
                                },

                            }
                        },
                        tooltip:{
                                position: function(data,width,height,element){
                                    return {top:-180,left:300}
                                }
                            },                      
                    }); 
                }       
            }
        )};         

    return {
        restrict: 'EA',         
        scope: {
            data: '='       

        },
        link : link
    };
});

In the HTML I have the following:

<div class="row">
    <div class="donut-route" >
        <donut-chart  data='routes'></donut-chart>
    </div>
</div>

My aim is to have the donut char re-size within the div it is currently sitting in.

I am aware of the C3 resize where I can pass values through and maybe I could add window sizes to the $scope.watch and resize it every time but I am not sure if that would be too heavy. From reading the documentation I think C3 graphs re-size automatically but due to the fact it's in a directive I think it is being restricted.

Any pointers or advice would be greatly appreciated.

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

I put your code in a working Plunker in order to investigate the problem.

Because the generated chart is an SVG object the CSS way to resize it automatically is tricky. However my suggestion is to explore the following post:

https://css-tricks.com/scale-svg/

or also this question on Stackoverflow

So I think the more effective way (as you stated) is to use size option on generate:

   var chart = c3.generate({
        size: {
          height: 200,
          width: 200
        }...

and resize method of C3 API to update size:

  chart.resize({height:100, width:300})

edited May 23 '17 at 11:50

Community

1
1

answered Dec 16 '15 at 09:04

beaver

17,333
2
40
66

Thank you for the suggestion. I was thinking that I would have to go down the watch route but it's good to see other options. – Softey Dec 16 '15 at 10:45

C3 Chart resize in angular directive

1 Answers1