I'm using react-apexcharts to create a bar chart, and I want to customize the appearance of a selected bar when clicked.

designer want this.

I know that setting the states.active.filter to none removes the default darken effect:

states: {
  active: {
    filter: {
      type: 'none',
    },
  },
},

However, I would like to:

• Add a dashed border around the selected bar
• Apply a custom background color when selected

I tried using plotOptions and states but couldn't find a way to achieve this.

How can I achieve this in ApexCharts?

Here is a minimal example of my current chart configuration:

const BarChart = (props: {
    series: any;
    height: number;
    xCategories: string[];
    horizontal?: boolean;
}) => (
    <ChartWrapper
        style={{
            position: `relative`,
            width: `100%`,
            margin: `0 auto`,
            boxSizing: `border-box`,
            border: `none`,
            padding: 0,
        }}
    >
        <ApexCharts
            type={'bar'}
            series={[
                {
                    name: '',
                    data: props.series,
                },
            ]}
            options={{
                chart: {
                    type: 'bar',
                    height: props.height,
                    toolbar: {show: false},
                    events: {
                        dataPointSelection(chart, options) {
                            console.log(chart, options);
                        },
                    },
                    background: 'transparent',
                },
                states: {
                    active: {
                        filter: {
                            type: 'none',
                        },
                    },
                },
                plotOptions: {
                    bar: {
                        barHeight: '50%',
                        borderRadius: 2,
                        horizontal: props.horizontal,
                        columnWidth: '8px',
                    },
                },
                dataLabels: {enabled: false},
                colors: [theme.palette.info.light],

                grid: {
                    show: true,
                    borderColor: theme.palette.greySecondary[100],
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    yaxis: {
                        lines: {
                            show: true,
                        },
                    },
                },
                xaxis: {
                    categories: props.xCategories,
                    position: 'bottom',
                    axisBorder: {
                        show: true,
                    },
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                    },
                    tooltip: {
                        enabled: true,
                    },
                },
                yaxis: {
                    show: true,
                    axisBorder: {show: false},
                    axisTicks: {show: true},
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
                tooltip: {
                    enabled: true,
                    theme: 'light',
                    style: {
                        fontSize: '12px',
                    },
                    y: {
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
            }}
            height={props.height || `auto`}
        />
    </ChartWrapper>
);