How to remove background color on hover columns in ant design charts?

Question

I want to remove the background on hover columns of ant charts. Could not find the appropriate property here- https://charts.ant.design/en/examples/column/basic#basic

here is my component:

import { Column } from '@ant-design/plots';

const Chart = () => {
const data = [
        {
            "date": "6/21",
            "volume": 9900
        },
        {
            "date": "7/21",
            "volume": 12100
        },
        {
            "date": "8/21",
            "volume": 12100
        },
        {
            "date": "9/21",
            "volume": 14800
        },
        {
            "date": "10/21",
            "volume": 18100
        }
    ];
    const config = {
        data,

        autoFit: true,
        xField: 'date',
        yField: 'volume',
        columnStyle: {
            fill: '#DBE7FD',
        },
    };
    return (
            <Column {...config} />
    )
});

export { Chart }

I want to remove the background on hover like below:

sample image of the chart

Answer 1

You could achieve that by setting interactions of your chart like so:

interactions: [
      {
        type: 'active-region',
        enable: false,
      },
],

So your component will be:

import { Column } from "@ant-design/plots"

const Chart = () => {
  const data = [
    {
      date: "6/21",
      volume: 9900,
    },
    {
      date: "7/21",
      volume: 12100,
    },
    {
      date: "8/21",
      volume: 12100,
    },
    {
      date: "9/21",
      volume: 14800,
    },
    {
      date: "10/21",
      volume: 18100,
    },
  ]
  const config = {
    data,

    autoFit: true,
    xField: "date",
    yField: "volume",
    columnStyle: {
      fill: "#DBE7FD",
    },
    interactions: [
      {
        type: "active-region",
        enable: false,
      },
    ],
  }
  return <Column {...config} />
}

export { Chart }

---

Working sample: