How to increase the ghap between catergories or labels react-chartjs-2

Question

I am working on react-chartjs-2 and want to increase the gap between labels to make it fit horizontal scroll.

const data = { labels: labels, datasets: [{ axis: 'y', label: 'Line chart', data: [7, 6, 2, 7, 6, 7, 8, 7] fill: false, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 2 }] }; I tried to add options but it is not helping.

link https://www.npmjs.com/package/react-chartjs-2

Note: On the top of this chart I have images that show the record related to this chart. The images have horizontal scroll but the chart does not have. If we increase the gap between the chart circles and so it will be fixed to the images gap.

You can see the images gape. The rest of the images is in a horizontal scroll and if the gap increase I want the chart also to be in the scroll.

End result should be like that

Answer 1

I found the answer.

<line
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>

enter link description here