gridster c3 charts auto resizing issue

Question

I am facing problem with c3 charts sizing issue with in gridster. Can any one help me how can I make there charts to be properly auto resized according to the gridster box they are in? Please find the Plunker

I have given size in options :

 size: {
        height: 100,
        width: 100
    }

If I remove this size property the charts are going out of box. But they are too small in gridster boxes. How can I make these chart to automatically occupy the full height and width of the gridster boxes that they are in?

Answer 1

The options you are using:

size: {
    height: 100,
    width: 100
}

are setting the height and width of the svg element to 100px instead of 100% I tried

size: {
    height: '100%',
    width: '100%'
}

Which will successfully set the width to 100% but somehow the height will be set to 320px

So if you add this to your css:

.c3 svg {
  width: 100%;
  height: 100%;
}

That will solve your sizing issue.

EDIT

Just a small change to set up an initial size and some comments added to your controller on the resize - stop event handler, where you will need to add some resizing of your charts based on the new sizes. See it here

  resizable: {
     enabled: true,
     handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],

     // optional callback fired when resize is started
     start: function(event, $element, widget) {},

     // optional callback fired when item is resized,
     resize: function(event, $element, widget) {}, 

     // optional callback fired when item is finished resizing 
     stop: function(event, $element, widget) {
        // here should update the size according to the widget size
        // widget.sizeX (* 160px) and widget.sizeY (* 160px)
        // and further adjustments
     } 
  },