How to highlight line chart area on hover (using recharts)

How to Highlight Line Chart Area on Hover (Using Recharts)

If you are working with line charts in TypeScript using the Recharts library, you may have encountered the need to highlight specific areas of the chart when hovering over it. This can be useful for emphasizing certain data points or trends. In this blog post, we will explore different solutions to achieve this effect.

Solution 1: Using Customized Dot Component

One way to highlight the line chart area on hover is by customizing the dot component of the Recharts library. By default, the dot component is responsible for rendering the dots at each data point. We can modify it to include additional styling when the mouse hovers over a specific dot.

Here’s an example of how you can implement this solution:

import { LineChart, Line, Dot } from 'recharts';

const CustomizedDot = (props: any) => {
  const { cx, cy, stroke, onMouseEnter, onMouseLeave } = props;

  return (
    <g>
      <Dot cx={cx} cy={cy} r={4} stroke={stroke} fill={stroke} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
      {props.isHovered && <circle cx={cx} cy={cy} r={8} fill="rgba(0, 0, 0, 0.1)" />}
    </g>
  );
};

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  { name: 'Apr', value: 300 },
  { name: 'May', value: 250 },
];

const LineChartWithHover = () => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  const handleDotEnter = (index: number) => {
    setHoveredIndex(index);
  };

  const handleDotLeave = () => {
    setHoveredIndex(null);
  };

  return (
    <LineChart width={400} height={300} data={data}>
      <Line type="monotone" dataKey="value" stroke="#8884d8" dot={<CustomizedDot />} />
    </LineChart>
  );
};

In this example, we define a CustomizedDot component that renders a larger dot and a transparent circle when the dot is hovered over. We use the onMouseEnter and onMouseLeave props to handle the hover events and update the state accordingly. The isHovered prop is used to conditionally render the transparent circle.

Solution 2: Using Customized Area Component

Another approach to highlighting the line chart area on hover is by customizing the area component of the Recharts library. The area component is responsible for rendering the filled area between the line and the x-axis. We can modify it to include additional styling when the mouse hovers over the chart.

Here’s an example of how you can implement this solution:

import { LineChart, Line, Area, Tooltip } from 'recharts';

const CustomizedArea = (props: any) => {
  const { fill, onMouseEnter, onMouseLeave, ...rest } = props;

  return (
    <Area
      {...rest}
      fill={props.isHovered ? 'rgba(0, 0, 0, 0.1)' : fill}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    />
  );
};

const data = [
  { name: 'Jan', value: 100 },
  { name: 'Feb', value: 200 },
  { name: 'Mar', value: 150 },
  { name: 'Apr', value: 300 },
  { name: 'May', value: 250 },
];

const LineChartWithHover = () => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  const handleAreaEnter = (index: number) => {
    setHoveredIndex(index);
  };

  const handleAreaLeave = () => {
    setHoveredIndex(null);
  };

  return (
    <LineChart width={400} height={300} data={data}>
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <CustomizedArea
        type="monotone"
        dataKey="value"
        stroke="#8884d8"
        fill="#8884d8"
        isHovered={hoveredIndex !== null}
        onMouseEnter={handleAreaEnter}
        onMouseLeave={handleAreaLeave}
      />
      <Tooltip />
    </LineChart>
  );
};

In this example, we define a CustomizedArea component that renders the area with a different fill color when the chart is hovered over. We use the onMouseEnter and onMouseLeave props to handle the hover events and update the state accordingly. The isHovered prop is used to conditionally change the fill color.

These are just two possible solutions to highlight the line chart area on hover using the Recharts library in TypeScript. Depending on your specific requirements and preferences, you can choose the solution that best fits your needs. Feel free to experiment and customize these solutions further to achieve the desired effect in your project.

That’s it for this blog post! We hope you found these solutions helpful in highlighting line chart areas on hover using Recharts in