Chart.js: [FEATURE] Responsive resize support for Gridstackjs

[yusufozturk]

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

[simonbrunel]

@yusufozturk it could be complicated to change the natural parent of the chart since we also use it to detect when the canvas is added to the DOM. Can you prepare a jsfiddle that showcase the limitations of the current resize strategy when used with tools like Gridstack? I don't understand why it would need a different treatment than simply wrap the canvas inside a dedicated div.

If it's really needed, I would rather think about a generic callback / hook to easily trigger a chart resize and so avoid DOM specific options.

[yusufozturk]

@simonbrunel you can see a test case here:
https://codepen.io/yusufozturk/pen/jabOBX

When you resize the grid, chartjs is looking for only parent div. But on the upper level, gridstackjs is blocking the main grid size (because user sets the width and height by resizing). So you start seeing overflow in the gridarea, because chartjs is not resizing itself by the gridstack.

We have already fixed this issue by using chartjs's "onResize:" function. So when user resize the gridstack, we use onResize function to get gridstack's height. So we are able to resize chartjs correctly. But it would be nice have an option to configure div monitoring via parameter.

[simonbrunel]

If I resize a widget (with the bottom-right handle), the chart is correctly resized. Same if I resize the whole window. If you don't mind, can you post a screenshot of the expected result vs current behavior (the overflow issue), but also your onResize implementation?

[simonbrunel]

Sorry, I didn't see your last comment after you edited it. I might have misunderstood the issue, but what about setting maintainAspectRatio: false to prevent the chart to overflow and make sure its container takes the full height .panel__content { height: 100% } (or similar method, or fix height)?

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

[yusufozturk]

@simonbrunel Could you check the codepen again?
https://codepen.io/yusufozturk/pen/jabOBX

Problem is, when we have a header div, or another div in the gridstack content area, then we start seeing scroll again.

[simonbrunel]

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

[yusufozturk]

@simonbrunel oh, it's my bad :) Thank you very much.