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

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}…