How to prevent overlapping in react-chartjs-2 and make chart bar scrollable?

Question

I am trying to draw a bar chart using react-chartjs-2, i am using typescript because i have a big amount of data, there is overlapping in the chart, i want to prevent overlapping, instead of that, i want horizontal scrolling

my config is as follow:

// options
export const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false,
    },
  },
  scales: {
    x: {
      beginAtZero: 0,
      labelAutoFit: false,
      grid: {
        offset: false,
      },
    },
  },
};

// labels
const labels = [...new Array(200)].map((_, i) => i * 3);

// data
export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [...Array(200)].map(() => ~~(1 + Math.random() * 100)),
      backgroundColor: '#454547',
      barThickness: 8,
      barPercentage: 0.5,
      borderWidth: {
        top: 2,
        right: 0,
        bottom: 0,
        left: 0,
      },
      borderColor: ['white'],
    },
  ],
};

and my main function is as follow:

export default function FooterCpu() {
  return (
    <div className='max-h-[160px] '>
      <Bar className='myChart' options={options} data={data} />
    </div>
  );
}

the result is as follow: bar chart with overlapping

anyone knows how can i prevent overlapping and instead of that make it horizontally scrollble? thanx in advance