Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Recharts Responsive Chart not responsive inside a CSS grid

See original GitHub issue

Do you want to request a feature or report a bug?

What is the current behavior?

Responsive Charts are do not resize when resizing windows if it’s inside a CSS grid.

example

.home {
  border: 1px solid blue;
  display: grid;

  grid-template-areas:
    'hello'
    'links'
    'main';
 }

.charts {
  border: 1px solid green;
  grid-area: main;
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

What is the expected behavior?

It should resize when window is resizing.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

https://github.com/rodoabad/automatic-palm-tree/tree/e557ebf246078c418da0678cba5b43c7abb41357

"recharts": "^1.1.0"

Issue Analytics

State:
Created 5 years ago
Comments:51

Top GitHub Comments

66reactions

rodoabadcommented, Aug 7, 2018

A quick solution is to use 99% width so that recharts can calculate the width properly.

16reactions

kalbert312commented, Oct 30, 2019

Not related to CSS grids but if you’re using this inside css flexbox, make sure to set min-width: 0; on the flex item to allow it to shrink.

Top Results From Across the Web

Recharts Responsive Container does not resize correctly ...

It seems rather hacky but a viable fix is to set width to 99% with a height or aspect ratio. <ResponsiveContainer width="99%" aspect={3}>....

ResponsiveContainer

A container component to make charts adapt to the size of parent container. One of the props width and height should be a...

Recharts Responsive Container does not resize correctly ...

Coding example for the question Recharts Responsive Container does not resize correctly in flexbox-Reactjs. ... chart-container is now a CSS Grid container.

Using Responsive Features – amCharts 4 Documentation

This is why we need to check what kind of object is this, so that properties are not being applied to all elements....

Creating a Responsive Admin Dashboard in React with ...

css /component/chart.css' import { LineChart, Line, XAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from "recharts"; function Chart({ ...