CODEWITHSUNDEEP
reactjsrecharts
CSS Monteiro
CSS Monteiro

Reputation: 71

recharts legend above chart

Sorry I don't show the whole code, but it's private-owned by my company. Here's a picture. Opening the link you'll understand what I mean. (I can't understand the reason short questions aren't allowed at Stackoverflow)

Legend (dates) intersects labels in chart

var barStores = [];
      //for (let n = 0; n < this.state.storeNames.length; n++) {
      for (let n = 0; n < 100; n++) {
        let storeName = this.state.storeNames[n];
        let randc = getRandomColor();
        barStores.push(
          <Bar dataKey = {storeName} stackId = "a" fill = {randc}  />
        );
      }

      const graph = (
        <BarChart width={1200} height={700} data={data2}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis type="category" dataKey="name" angle={-45} textAnchor="end"/>
          <YAxis type="number" />
          <Tooltip />
          <Legend verticalAlign = "bottom" />
          {barStores}
        </BarChart>
      );
      return graph;
body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  /*height: 800px;*/
  background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <title>Panel - BigQuery</title>
    <link rel="stylesheet" type="text/css" href="theme.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Upvotes: 5

Views: 23496

Answers (5)

Jake Ruth
Jake Ruth

Reputation: 66

I spent a lot of time trying to figure this bug out for complicated use cases of recharts.

Many of the css fixes here and on Github threads work but only when the number of lines on the graph is static/doesn't change after first render.

Click here to see a solution that worked for (posted on gitlab issue) https://github.com/recharts/recharts/issues/172#issuecomment-873633726

I really hopes this helps some people like it helped me.

Upvotes: 0

yeshwanthi
yeshwanthi

Reputation: 11

What worked for me is setting legend property as such. wrapperStyle={{ position: 'relative' }}

Upvotes: 1

Jasurbek Nabijonov
Jasurbek Nabijonov

Reputation: 1745

The solution that worked for me was to check bar chart data and length and then show if available. You can read more on github issue.

{barChartData && barChartData.length > 0 && (
        <ResponsiveContainer
          width="100%"
          height="99.5%"
          className={classes.boxContainer}
        > 
           <YourChart />
        </ResponsiveContainer>
      )}

If you set wrapperStyle={{top: 0, left: 25}} then it may not work if chart height is dynamic.

Upvotes: 1

kiranvj
kiranvj

Reputation: 34107

wrapperStyle works as mentioned by James. The below one should also work fine

<Legend layout="horizontal" verticalAlign="top" align="center" />

enter image description here

Few legend placement codes are mentioned here

Upvotes: 7

James Gentes
James Gentes

Reputation: 8086

Try <Legend wrapperStyle={{top: 0, left: 25}}/>and assuming you've wrapped it in a ResponsiveContainer with a defined height, that should work.

Upvotes: 6

Related Questions