Problem:
I have created a vertical bar charts using recharts. Here I am providing my code.
import React, { Component, PureComponent } from "react";
import { Card, CardBody, CardTitle } from "reactstrap";
import {
Bar,
BarChart,
Tooltip,
XAxis,
YAxis,
ResponsiveContainer,
Cell,
LabelList
} from "recharts";
import "./SubcribersByRegion.css";
const colors = [
"#138185",
"#26a0a7",
"#65d3da",
"#79d69f",
"#cbe989",
"#ebf898",
"#f9ec86",
"#fad144",
"#ec983d",
"#d76c6c"
];
const data = [
{
name: "Page A",
pv: 2400,
amt: 2400
},
{
name: "Page B",
pv: 1398,
amt: 2210
},
{
name: "Page C",
pv: 9800,
amt: 2290
},
{
name: "Page D",
pv: 3908,
amt: 2000
},
{
name: "Page E",
pv: 4800,
amt: 2181
},
{
name: "Page F",
pv: 3800,
amt: 2500
},
{
name: "Page G",
pv: 4300,
amt: 2100
},
{
name: "Page H",
pv: 4300,
amt: 2100
},
{
name: "Page I",
pv: 4300,
amt: 2100
},
{
name: "Page J",
pv: 4300,
amt: 2100
}
];
class SubcribersByRegion extends Component {
render() {
return (
<div>
<Card className="subscribers-by-region-card">
<CardTitle className="subscribers-by-region-card-title">
Subscribers by Region
</CardTitle>
<CardBody>
<ResponsiveContainer width="100%" height="100%" aspect={5.0 / 6.0}>
<BarChart
data={data}
layout="vertical"
barGap={4}
margin={{
top: 6,
right: 50,
left: 0,
bottom: 0
}}
>
<Tooltip />
<XAxis type="number" className="xaxies" dy={1} />
<YAxis type="category" />
<Bar dataKey="pv" fill="#8884d8" maxBarSize={10}>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index]} />
))}
<LabelList dataKey="pv" position="right" />
</Bar>
</BarChart>
</ResponsiveContainer>
</CardBody>
</Card>
</div>
);
}
}
export default SubcribersByRegion;
This is showing me 0,1,2....... in the y-axis I want to show Page A, Page B,... Can someone help me to solve this issue by modifying my code? Thank you? I tried a lot to find a solution to this problem but I was unable to find any good solution for this problem.
https://recharts.org/en-US/api/YAxis
From the docs, we can see <Label />
is a child component of YAxis
https://recharts.org/en-US/api/Label
Label
has a prop for value
Add the Label
Component as a child of YAxis
Add styles https://github.com/recharts/recharts/issues/720
<YAxis dataKey={"height"} yAxisId={"height"}>
<Label
style={{
textAnchor: "middle",
fontSize: "130%",
fill: "white",
}}
angle={270}
value={"Height (ft.)"} />
</YAxis>
您只需要指定轴的dataKey
是什么dataKey
。
<YAxis type="category" dataKey="name" />
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.