Responsive cutout (Mobile-Tablet-Desktop)

[DianyelaMaldonado]

Documentation Is:

• [ ] Missing or needed?
• [ ] Confusing
• [x] Not sure?

Please Explain in Detail...

I have my graph working, my problem is that I have a cutout: 120, that measurement is global,

I need to add a different cutout number on a tablet, for example: if it is mobile, it is: cutout: 120 and on a tablet: cutout: 40

How could I do that?

This is my code at the moment:

const options = {
          type: chartType,
          data: {
            labels: data.labels,
            datasets: [
              {
                fill: false,
                backgroundColor: data.colors,
                borderColor: data.colors,
                data: data.values,
                borderWidth: 0,
                responsive: true,
                maintainAspectRatio: true, 
                cutout: 120, 
              },
            ],
          },
          options: {
            responsive: true,
            // Maintain the original canvas aspect ratio (width / height) when resizing.
            maintainAspectRatio: true,
            plugins: {
              tooltip: {
                enabled: false, //hover 
                displayColors: false,
              },
              legend: {
                display: false,
              },
            },
          },
        }

### Your Proposal for Changes

This cutout is the one that I need to place different measurements depending on the device:

### Example

datasets: [ { fill: false, backgroundColor: data.colors, borderColor: data.colors, data: data.values, borderWidth: 0, responsive: true, maintainAspectRatio: true, cutout: 120, },

[LeeLenaleee]

For these kind of questions please head over to Stack overflow .

But what you need to do is check the screensize, determine if you are on a tablet and based on that condition you can set a different cutout percentage