How can I make a responsive chart that fills a gridstack widget using d3.js and CSS?

94 Views Asked by At

I'm using gridstack 8.2.0 and d3 7.8.4. What I'm trying to do is to draw a chart inside a widget, which would be responsive relative to the widget resizing.

Here is an example: https://stackblitz.com/edit/js-epbxkx?file=index.js,style.css,index.html

The chart resizes correctly when changing widget's width but not height. I would like that the chart fills entire widget, and I don't care about aspect ratio. Or even better, that the widget 'snaps' to the size of the widget so that there is no empty space like in the picture.

chart with empty space below

I tried playing with viewBox and width and height attributes of the chart, plus some CSS but failed. I'm sure there must be simple solution involving CSS so that svg fills it's container.

0

There are 0 best solutions below