recharts legend above chart
Question
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>
5 answers
solution1
5 2019-09-04 03:08:40
Try <Legend wrapperStyle={{top: 0, left: 25}}/> and assuming you've wrapped it in a ResponsiveContainer with a defined height, that should work.
solution2
5 2020-03-22 04:24:44
wrapperStyle works as mentioned by James. The below one should also work fine
<Legend layout="horizontal" verticalAlign="top" align="center" />
Few legend placement codes are mentioned here
solution3
1 2021-02-24 12:46:47
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.
solution4
1 2021-02-25 07:46:39
What worked for me is setting legend property as such. wrapperStyle={{ position: 'relative' }}
solution5
0 2021-07-04 18:28:49
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.