Google React Charts Placement & Legend Placement

Question

I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off.

If I leave it as a default it looks like this:

However I want it to be on the left side and the legend to be next to it.

When I change the position of the chart area:

chartArea: {
            left: 0,
            right: 400,
            top: 0,
            bottom: 0,
            width: '100%',
            height: '80%',
        },

It then looks like this:

For whatever reason it thinks there isn't enough space and it cuts the legend text which is really annoying.

Here is the code I am using:

const pieOptions = {
        title: '',
        pieHole: 0.6,
        slices: [
            {
                color: '#00A3E0',
            },
            {
                color: '#F2A900',
            },
            {
                color: '#43B02A',
            },
            {
                color: '#DF4661',
            },
            {
                color: '#003865',
            },
            {
                color: '#A15A95',
            },
            {
                color: '#FF6A13',
            },
        ],
        legend: {
            position: 'right',
            alignment: 'end',
            textStyle: {
                color: '#666',
                fontSize: 12,
            },
        },
        tooltip: {
            showColorCode: true,
        },
        chartArea: {
            left: 0,
            right: 400,
            top: 0,
            bottom: 0,
            width: '100%',
            height: '80%',
        },
        fontName: 'inherit',
        fontSize: 12,
    }

Can anyone advise?

Also if this is not fixable, can you please recommend a chart which supports that and custom colours please?

Thank you in advance!