Changing fill or opacity of specific bar in RadialBar chart

[idjuradj]

Hi all, I am working on a RadialBar chart. One effect I would like to achieve is that when you click somewhere outside of the chart (custom legend component) bar that represents value of the clicked (selected) items gets highlighted in some way - ideally, fill opacity of other bars gets reduced, but some border on the selected bar would do as well.

Example:
Initial state of the chart

Then, when you click legend item for the greend circle (second looking from the outside inwards), just that green round keeps it's opacity, others fade to 10%.

Hope you understood what I meant. Thanks for the help in advance

[ckifer]

Hi!

Could you give a codesandbox of the initial state of your chart so others can try to help?

[Yilun-Sun]

Hi @idjuradj , thanks for the question, that is an interesting one!

I believe this is exactly what you want -> Codesandbox

The solution is very simple, use a state to keep the selected radial bar name, and use Cell as a child of RadialBar to get control of the selected radial bar opacity.

<RadialBar
  background
  dataKey="uv"
>
  {data.map((entry, index) => (
    <Cell
      key={`cell-${index}`}
      opacity={selectedRadialBar === entry.name ? 1 : 0.1}
    />
  ))}
</RadialBar>
<Legend
  iconSize={10}
  width={120}
  height={140}
  layout="vertical"
  verticalAlign="middle"
  wrapperStyle={style}
  content={({ payload }) => (
    <ul>
      {payload?.map((entry, index) => {
        return (
          <li
            onClick={(data) => setSelectedRadialBar(entry.value)}
            key={`item-${index}`}
            style={{
              color: entry.color,
            }}
          >
            {entry.value}
          </li>
        );
      })}
    </ul>
  )}
/>

Also, if you want the legends get the related opacity, you can add opacity: selectedRadialBar === entry.value ? 1 : 0.2 to the list item style.

[ckifer]

nice work @Yilun-Sun - we should add this to the storybook