9

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?

Madasu K
  • 1,813
  • 2
  • 38
  • 72

3 Answers3

5

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
     } 
  },
DDan
  • 8,068
  • 5
  • 33
  • 52
  • DDan, Could you please modify my original plunker and make it to work. Because I made these changes to the plunker I have posted in the question but still it is not working as expected. Please find the plunker updated with your solution still it is not working as expected http://plnkr.co/edit/5G7bGf2EZ9nKLA8se0oZ?p=preview. Sorry for my late response as I was in off whole last week. – Madasu K Jan 09 '17 at 09:55
  • Hi, I won't solve the complete problem but can give some pointers. http://plnkr.co/edit/NWBxUo?p=preview I edited the controller. I've set some initial sizes and added a comment on the resize.stop callback. That's where your focus should be. On that event, you are supposed to adjust the sizes of the charts according to the new widget sizes. – DDan Jan 10 '17 at 01:41
0

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.

Ced
  • 15,847
  • 14
  • 87
  • 146
0

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

user7393877
  • 17
  • 2