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

I had a similar problem not long ago. What I did is use scale(), but it doesn't work on firefox.

Basically find the width when loading, and make a new scale when the user changes the screen size (or any other event like resizing your containers).

add this at the bottom of your plunker :

<script>

  let width = window.innerWidth;

  window.addEventListener('resize', (event) => {
      let newWidth = window.innerWidth;
      let ratio = newWidth / width;
      let ctnr = document.getElementById('widget1');

      ctnr.style.transform = "scale(" + ratio + ")";

  });
</script>

That will scale widget 1. Of course you might have to play with the numbers a bit to find what works for you.

The widget will stay in place however; thus if you want it to be aligned on the left you can use in your css :

transform-origin: 0;

I hope this helps.

Answer 2

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
     } 
  },

Answer 3

Use nvd3 plugin this is same as c3 plugin also this smoothly works with gridster, Please find the below link

https://krispo.github.io/angular-nvd3/#/dashboard