I am building a dashboard like App that should have all relevant information on one screen. The dashboard contains a row of four gauge charts to visualize the most important KPIs. As the space is very limited and we have lots of information to display, I try to use every pixel as efficient as possible and thus reduce whitespace to a minimum. However, for the Solid Gauge from Highcharts I really struggle to do so.
I would like to remove the unused yellow box in the screenshot
I managed to achieve it using negative values for margin in the charts config of the element or by increasing the size config in the highcahrts.pane over 100% but these solutions have the disadvantage that they only work if my layout row has a fixed pixel value as height.
The options "noPadding": true or "gap": "0px" within the layout seem to have no effect on that problem.
Does anyone know a way to remove the unused whitespace a the bottom of my flex grid row and still keep the flexibility of looking pretty on different screen resolutions?