Implementing Custom Bar Chart Legends

Showcase creating custom legends for a bar chart that represent different data categories, including adding interactive elements to legends for toggling the visibility of specific bars in the chart.

import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

Import necessary components from the Recharts library.

const CustomLegend = ({ payload, onClick }) => (
  <ul>
    {payload.map((entry, index) => (
      <li
        key={`item-${index}`}
        onClick={() => onClick(entry.value)}
        style={{ color: entry.color, cursor: 'pointer' }}
      >
        {entry.value}
      </li>
    ))}
  </ul>
);

Define a custom legend component that allows toggling the visibility of bars.

const MyBarChart = ({ data }) => {
  const [activeBars, setActiveBars] = useState(data.map(d => d.name));

  const toggleBar = (name) => {
    setActiveBars(activeBars.includes(name)
      ? activeBars.filter(n => n !== name)
      : [...activeBars, name]
    );
  };

  return (
    <BarChart width={730} height={250} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      {data.map(d => (
        activeBars.includes(d.name) && <Bar dataKey={d.name} fill={d.fill} />
      ))}
      <CustomLegend payload={data.map(d => ({ value: d.name, color: d.fill }))} onClick={toggleBar} />
    </BarChart>
  );
};

Use the CustomLegend and a toggle functionality within a BarChart component to allow users to hide or show bars by clicking on the legend items.