import { Canvas, Chart, Interval } from '@antv/f2';
const data = [
  { genre: 'Sports', sold: 5 },
  { genre: 'Strategy', sold: 10 },
  { genre: 'Action', sold: 20 },
  { genre: 'Shooter', sold: 20 },
  { genre: 'Other', sold: 40 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" color="genre" />
  </Chart>
</Canvas>;

<Interval selection={{ defaultSelected: [{ genre: 'Sports', sold: 5 }] }} />

<Interval selection={{ selectedStyle: { fillOpacity: 1 } }} />

<Interval
  selection={{
    selectedStyle: (record) => {
      return { fillOpacity: 1 };
    },
  }}
/>

<Interval selection={{ unSelectedStyle: { fillOpacity: 0.4 } }} />

<Interval
  selection={{
    unSelectedStyle: (record) => {
      return { fillOpacity: 0.4 };
    },
  }}
/>

<Interval selection={{ cancelable: false }} />