Chart component resizes width but not height when parent is resized

I’ve tried every hack and stacktrace article offering a solution - none work so far. I’ve really got to figure out this showstopping problem 😦

I have a “Card” component which gets added into a draggable dashboard-style layout component (react-grid-layout). “CardPanel” is my wrapper around the responsive grad layout parent. The Card can resize nicely in the CardPanel parent. Into the Card I insert my “BarChart” (which is a wrapper class around “HorizontalBar”.

Here is how the card is added to the CardPanel…

          <CardPanel initialLayouts={initialLayouts}>
            <Card key="1" close>
              <BarChart fsInfo={fsInfo} style={{ width: '100%', height: '100%' }} />
            </Card>
            <Card key="2">
              <span className="text">2</span>
            </Card>
              ... etc etc
          </CardPanel>

Here is how the CardPanel wraps it’s Card children (to satisfy the react-grid-layout requirements and make the cards resizable and draggable)…

    <ResponsiveReactGridLayout
      className="layout"
      compactType="vertical"
      breakpoints={{ lg: 1200, md: 800, sm: 680, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      rowHeight={30}
      layouts={this.state.layouts}
      draggableHandle=".drag-handle"
      onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts)}
    >
      {
        React.Children.map(this.props.children, (child) => {
          if (!child.key) return;
          return (
            <div key={child.key} className={this.props.className} style={this.props.style}>
              {child}
            </div>
          );
        })
      }
    </ResponsiveReactGridLayout>

Here is how “Card” wraps it’s children (in this case, a BarChart)…

  <div id={id}>
    <div className="drag-handle">
      <hr />
      <hr />
    </div>
    {children}
    {close &&
    <i
      className={'close-button fa fa-fw fa-times-circle'}
      onClick={this.onClose}
      aria-hidden="true"
    />}
  </div>

…and finally, here is how BarChart wraps the ChartJS component…

  <div className="barChart" >
    <HorizontalBar data={data} options={options} />
  </div>

Here is the ChartJS settings of the bar chart (notice that maintainAspectRatio is false)…

const options = {
  legend: { display: true },
  scales: {
    xAxes: [{
      ticks: { min: 0,  max: 100, },
      stacked: true,
    }],
    yAxes: [{ barPercentage: 0.6, stacked: true, }],
  },
  elements: {
    rectangle: {
      borderWidth: 4,
      borderColor: 'rgb(255, 255, 0)',
    },
  },
  responsive: true,
  **maintainAspectRatio: false**,
};

The before and after screenshots show that the bar charts stretches it’s width nicely, but not the height. Also notice another Card has a simple < span > which resizes perfectly in both width and height.

Before:

After:

Friends, I am really stumped. I don’t want to have to go hunting for another Charts package, I like this one! Plz help me get past this tricky problem!

Thanks, /Mark

[AdrianoMoura]

What helped me was to add the option maintainAspectRatio and set as false

<Line data={data} options={{
 maintainAspectRatio: false
}}/>

And in my case I also need to add the redraw as true

<Line data={data} redraw={true} options={{
 maintainAspectRatio: false
}}/>

[Lucasgoh-cdg]

What helped me was to add the option maintainAspectRatio and set as false

<Line data={data} options={{
 maintainAspectRatio: false
}}/>

And in my case I also need to add the redraw as true

<Line data={data} redraw={true} options={{
 maintainAspectRatio: false
}}/>

Hi, even though I am using this, I am still having the same problem, what should I do ya? Thanks in advance