[FEATURE] Responsive resize support for Gridstackjs

Chartjs is watching for parent node to understand resize. But when you use libraries like Gridstack / Gridster etc., these libraries have different div layouts. So instead of parent node, Chartjs should monitor Gridstack Item node to understand resizing better.

We can put an option into chart options. If user specify an div id, instead of parent node of canvas, we can monitor specific DIV. In that case, when user resize the Gridstack widget, Chartjs can automatically resize itself for the new grid height and width.

Test case:
https://codepen.io/yusufozturk/pen/jabOBX

Author: Fantashit

1 thought on “[FEATURE] Responsive resize support for Gridstackjs

  1. In this case, it’s not Chart.js that makes the content overflow but the stylesheet used for your panel elements. .panel__content { height: 100%% } works fine if it’s the only child, but since you added the header element, panel__header.height + panel__content.height > 100%% -> overflow.

    If you need an header, maybe you should go with flex boxes:

    .panel {
      display: flex;
      flex-direction: column;
    }
    
    .panel__content {
      flex: 1;
      min-height: 0;
    }

    https://codepen.io/anon/pen/POPqeW

Comments are closed.