Recharts — Change Opacity of Line When Hovering Over Legend and Responsive Container

Image for post
Image for post
Photo by Nico Smit on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store