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.

Scrollbar keeps appearing on load

See original GitHub issue

I feel this is a bug that I can’t seem to pin down.

Currently, on load it sometimes is pretty glitchy, and there is this scrollbar that appears, and sometimes flashes, and it disappears as soon as my cursor hovers over the graph. I will have a screenshot below:

screen shot 2017-05-24 at 8 28 54 am

Here is the chart, that is wrapped inside of a ResponsiveContainer component:

<ResponsiveContainer width="100%" height={250}>
  <BarChart data={this.state.data02}>
    <Bar dataKey='sales' fill='#8884d8'/>
    <Tooltip />
    <XAxis dataKey="date"/>
    <YAxis/>
  </BarChart>
</ResponsiveContainer>

Recharts version is: 0.22.4 Browser: Chrome on Mac

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

arenacommented, May 29, 2017

Thank you!

I put this in my main styles.css file. I don’t feel super awesome about it but I’m very happy to not see that scrollbar anymore!!! 😃

/******************************************************************************* ReCharts Fixed with Hacks *******************************************************************************/

:global .recharts-responsive-container div:nth-child(2) { overflow: hidden !important; }

:global .recharts-responsive-container div:nth-child(2) div { overflow: hidden !important; }

(Note: you probably don’t need :global if you copy this hack…but we did)

1reaction

dekkofilmscommented, May 26, 2017

@arena I mean I did find some CSS hacky thing to get rid of them, but I would still love a better explanation or solution to this issue. Didn’t want to waste so much of my day trying to work on it haha.

I found this div that is a sibling to the recharts-wrapper and it’s two div children of the graph that has overflow set to scroll, and I just set it as hidden in the CSS. Not sure why there was a scroll there in the first place, and it hasn’t impacted me changing it to hidden.

The one highlighted, and it’s two children shown below: screen shot 2017-05-26 at 4 08 35 pm