Chart height does not change dynamically

[mvgian]

I have requirement to change a chart height dynamically based on parent div's size. I've used a boolean isHalf to determine if the chart height should be at 50% or 90%. The initial value for isHalf is true, therefore the chart component initially renders with height 50%. However when isHalf is changed to false, the height remains at 50% when the value is passed to the component as 90%

const report = { chart_configuration: {
   height:  isHalf ? "50%" : "90%";
}}

<Chart
     chartType={report.chart_configuration.type}
     loader={<div>Loading Chart</div>}
    data={report.chart_configuration.data}
    options={report.chart_configuration.options}
    width={report.chart_configuration.width}
    height={report.chart_configuration.height}
    legendToggle
/>

[YazhouMiao]

I have found this issue too, very bad experience

[stgermaniac]

This creates 4 divs around the SVG (using the gantt chart as an example.) If the height is updated in the javascript, the height of the SVG is updated, but the height on the outermost two are not. That is causing some headaches for me.

• div height style (original)px

• div height style (original)px

• div height style (updated)px

• div height style 100%

• svg height attr (updated)

I did find a way around this by wrapping the component in another div with a class name to get surgical with some CSS tweaks. SCSS:

.cl_chart_container { & > div { height: auto !important; & > .cl_chart { height: auto !important; } } }

Not ideal but it helps.

[jtg-gg]

I found the root cause https://github.com/rakannimer/react-google-charts/blob/master/src/components/GoogleChart.tsx#L219

shouldComponentUpdate(nextProps: Props, nextState: State) {
    return (
      this.state.isReady !== nextState.isReady ||
      nextProps.controls !== this.props.controls
    );
  }

the component will only re-render if controls prop is changed

[jtg-gg]

I found a "good" workaround

<div style={{height:dynamicHeight}}>
  <Chart
    ...
    height="100%"
    options={{
      chartArea:{height:dynamicHeight}
    }}
  />
</div>