We can add charts easily to a React app with Recharts.
In this article, we’ll look at how to use it.
Change Opacity of Line When Hovering Over Legend
We can change the opacity of the line when we hover over the legend.
For example, we can write:
import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend
} from "recharts";
const data = [
{
name: "Page A",
uv: 4000,
pv: 2400,
amt: 2400
},
{
name: "Page B",
uv: 3000,
pv: 1398,
amt: 2210
},
{
name: "Page C",
uv: 2000,
pv: 9800,
amt: 2290
}
];
export default function App() {
const [opacity, setOpacity] = React.useState({
uv: 1,
pv: 1
});
const handleMouseEnter = (o) => {
const { dataKey } = o;
setOpacity({ ...opacity, [dataKey]: 0.5 });
};
const handleMouseLeave = (o) => {
const { dataKey } = o;
setOpacity({ ...opacity, [dataKey]: 1 });
};
return (
<div className="App">
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
/>
<Line
type="monotone"
dataKey="pv"
strokeOpacity={opacity.pv}
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line
type="monotone"
dataKey="uv"
strokeOpacity={opacity.uv}
stroke="#82ca9d"
/>
</LineChart>
</div>
);
}
We have the opacity state to set the opacity of the line.
The Legend has the onMouseEnter and onMouseLeave props to set the functions to set the opacity of the lines when we hover the lines.
The strokeOpacity prop of the Line component sets the opacity of the line.
Responsive Container
We can add a responsive container for our charts with the ResponsiveContainer component.
For example, we can write:
import React from "react";
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer
} from "recharts";
const data = [
{
name: "Page A",
uv: 4000,
pv: 2400,
amt: 2400
},
{
name: "Page B",
uv: 3000,
pv: 1398,
amt: 2210
},
{
name: "Page C",
uv: 2000,
pv: 9800,
amt: 2290
}
];
export default function App() {
return (
<div className="App" style={{ width: "100%", height: 300 }}>
<ResponsiveContainer>
<AreaChart
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
</ResponsiveContainer>
</div>
);
}
to add the charts.
We set the width and height of the div.
And the ResponsiveContainer will fill the width and height of the div.
Conclusion
We can change the line opacity when we hover over the legend and the responsive container with Recharts.
