Menu
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>
933
The Title plugin includes only the text property that accepts the chart's title. The Legend plugin contains a list of legend items. Each item specifies a marker and label. The marker has the same color as the corresponding series, and the item label stores the series name. Import the plugins listed above to set up a Chart with a legend and title.
The React Chart supports titles and legends. You can use the related plugins to display these chart elements. The Title plugin includes only the text property that accepts the chart's title. The Legend plugin contains a list of legend items. Each item specifies a marker and label.
Chart legend displays the labels of the datasets appear on a chart. The chart visualize the raw data, the legend visualize the datasets. The legend is a separate component with a separate HTML tag.
If a chart is not wide enough, the legend will keep subdividing its items into more rows until everything fits. In addition to the width and height of the chart, the legend's layout is also affected by the amount of padding between and within the legend items.
Try <Legend wrapperStyle={{top: 0, left: 25}}/>and assuming you've wrapped it in a ResponsiveContainer with a defined height, that should work.
185
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
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
