I’m trying to make this BarChart responsive, as of right now it has a fixed height (500x200px). The documentation is pretty vague and says to wrap the BarChart in a ResponsiveChartContainer, but I tried to do this every possible way and it either just made the whole Chart disappear or gave me errors. Anyone know how to do this properly?

import React from 'react';
import { BarChart } from '@mui/x-charts';

interface HighlightCounts {
    [key: string]: number;
}

interface MyBarChartComponentProps {
    counts: HighlightCounts;
}

class MyBarChartComponent extends React.Component<MyBarChartComponentProps> {
    render() {
        const { counts } = this.props;

        const xAxisConfig = {
            tickLabelInterval: (value: any, index: any) => Number.isInteger(value), // only full numbers bc these are counts
            valueFormatter: (value: any) => value.toFixed(0),
            label:'Votes'
        };

        // Transform the highlightCounts object into an array suitable for the BarChart
        const dataset = Object.entries(counts).map(([name, value]) => ({
            name,
            value
        }));

        return (
            <BarChart
                dataset={dataset}
                yAxis={[{ scaleType: 'band', dataKey: 'name' }]}
                xAxis={[xAxisConfig]}
                series={[
                    {
                        color:'#DBF881',
                        dataKey: 'value',
                        valueFormatter: (value) => `${value} votes`
                    }
                ]}
                width={500}
                height={200}
                layout="horizontal"
                borderRadius={5}
                margin={{ left: 75 }}
                sx={{
                    "& .MuiChartsAxis-left .MuiChartsAxis-tickLabel, & .MuiChartsAxis-bottom .MuiChartsAxis-tickLabel, &.MuiChartsAxis-tick, .MuiChartsAxis-label": {
                        strokeWidth: "0.4",
                        fill: "#fff"
                    },
                    "& .MuiChartsAxis-left .MuiChartsAxis-line, & .MuiChartsAxis-bottom .MuiChartsAxis-line, .MuiChartsAxis-tick": {
                        stroke: "#fff",
                        strokeWidth: 0.4,
                    }
                }}
            />
        );
    }
}

export default MyBarChartComponent;

This is what it looks like rn:
[2]: https://i.sstatic.net/koRsEWb8.png