How do I prevent the legend from being cut off in react-chartjs-2's Doughnut Chart when displaying a large number of classes?

Question

I have about 120 classes to be shown in Doughnut Char from react-chartjs-2. The doughnut is ok, but the legend is being cut (see image below). How do a show all classes in the legend?

enter image description here

This is the code I am using:

<D className="col e aC" style={{ padding: '0.5rem' }}>

 <D size="350px">
   <Typography variant="subtitle1" color="textSecondary">this.props.title}</Typography>
   <Doughnut data={this.props.data} options={{
     responsive: true,
     plugins: {
       legend: {
         display: true,
         position: !!this.props.legendPosition ? this.props.legendPosition : 'right'
       }
     }
   }} />
 </D>

I am trying to see all classes in the legend from react-chartjs-2, for a huge number of classes (120 for instance).