Issue with Legend Filters Resetting and Not Graying Out After Bar Click in <Column /> Chart

[MadiAbhilash]

Description: I am currently using the <Column /> chart from the Ant Design Plots library. I am encountering the following issues:

Legend Filters Reset on Bar Click: When I click on a bar within the chart, the legend filters reset to their initial state, which is not the expected behavior.

Legend Items Not Graying Out After Filtering: After filtering by clicking on a legend item, the selected option does not gray out as expected. This creates confusion, as it's unclear which items have been filtered out.

Expected Behavior: The legend filters should not reset to the initial state when a bar in the chart is clicked. The legend items should properly gray out to reflect the current filter state, providing clear visual feedback on which items are active or inactive.

Steps to Reproduce:

• Implement a <Column /> chart with multiple legend items.
• Click on a legend item to filter the data.
• Observe that the filtered legend item is not grayed out.
• Click on any bar in the chart and notice that the filters reset.
• Screenshots: Here’s a screenshot showing the issue:

Environment: Ant Design Plots Version: V2

Config

  const config: ColumnConfig = {
    data,
    theme,
    xField: ServerKeys.OBSERVATION_DATE,
    yField: ServerKeys.PRICE_INC,
    colorField: ServerKeys.OB_CARRIER,
    group: true,
    label: {
      textBaseline: "bottom",
      //@ts-ignore
      formatter: (v: number) => v ? `${CurrencySet?.[currencyCode] ?? currencyCode} ${v?.toLocaleString()}` : "",
    },
    axis: {
      y: { title: `${labels.price} (${currencyCode})` },
      x: { title: `${labels.observation} ${labels.date}` }
    },
    style: { width: 30, cursor: "pointer" },
    scale: {
      x: {
        type: "band",
        padding: 0.5,
      }
    },
    interaction: {
      tooltip: {
        wait: 300,
        render: (_: unknown, { title, items }: { title: string; items: { name: string; value: number; color: string }[] }) => {
          return `<div class="text-[10px] dark:text-white">
        <p>${title}</p>
        <ul>${items.map((o) => `<li class="flex justify-between items-center">
              <p class="flex justify-between items-center">
              <span style="background:${o.color}" class="size-2 mr-1"></span>
              <span>${o.name}</span></p>
              <span>${o.value.toLocaleString()}</span>
            </li>`).join(" ")}
        </ul>
      </div>`},
      },
      legendHighlight: true,
    },
    onReady: ({ chart }) => {
      chart.on("element:click", (e: PlotEvent) => {
        const { nativeEvent, data } = e;
        if (!nativeEvent) return;
        handleTargetModel(e);
      });
    },
    // annotations: [
    //   {
    //     type: "text",
    //     data: ["2024-08-27", 20_211],
    //     encode: {
    //       text: `▬▬▬`
    //     },
    //     style: { fill: "black", textAlign: "center" },
    //   }
    // ]
  };```