GlLineChart: Chart does not fill container height when `auto`

Problem to solve

In the groupproduct analytics dashboard setting the chart height to auto and setting responsive creates a chart with 0 height.

This can be fixed by setting the chart height to full or using flex grow. However there is no API to style the GlChart component inside GlLineChart.

Needed for Cube Query Rendering - Improve panel responsive... (gitlab#385181 - closed).

Screenshots

Chart with height: auto

image

Proposed solution

Add an optional property to GlLineChart to set the CSS class on its GlChart element.

Note: This could also potentially be applied to all other chart components.

Implementation plan

There are two options:

  1. Add a chartStyle to GlLineChart that sets the style on its GlChart.
  2. Add a chartStyle to GlChart which would be passed by GlLineChart's v-bind="$attrs".

My preference would be to go with the second since it would solve it for all components that wrap GlChart.

Edited by Jiaan Louw