react-chart-js2: How to create a guage chart with 2 overlapping guages

Question

I want to render something similar to this:

It would be great if someone could provide a solution to this without using other library than react-chart-js2. Incase that is not possible, please provide some relevant library options to use to render this

I have tried the following code but doesn't seem to work:

import React from 'react';

import { Doughnut } from 'react-chartjs-2';

const MyChartComponent = () => {
    // Chart 1
    const data1 = {
        labels: ["Red", "Orange", "Green"],
        datasets: [
            {
                label: '',
                data: [33, 33, 33],
                backgroundColor: [
                    'rgba(231, 76, 60, 1)',
                    'rgba(255, 164, 46, 1)',
                    'rgba(46, 204, 113, 1)'
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)'
                ],
                borderWidth: 5
            }
        ]
    };

    const options1 = {
        cutoutPercentage: '95%',
        rotation: -30 * Math.PI,
        circumference: 60 * Math.PI,
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        },
        //cutoutPercentage: 95
    };

    // Chart 2
    const data2 = {
        labels: ["", "Purple", ""],
        datasets: [
            {
                data: [88.5, 1, 10.5],
                backgroundColor: [
                    "rgba(0,0,0,0)",
                    "rgba(255,255,255,1)",
                    "rgba(0,0,0,0)",
                ],
                borderColor: [
                    'rgba(0, 0, 0 ,0)',
                    'rgba(46, 204, 113, 1)',
                    'rgba(0, 0, 0 ,0)'
                ],
                borderWidth: 3
            }
        ]
    };

    const options2 = {
        cutoutPercentage: '95%',
        rotation: -30 * Math.PI,
        circumference: 60 * Math.PI,
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        }
    };

    return (
        <div style={{ position: 'relative', width: '600px', height: '400px' }}>
            <Doughnut data={data1} options={options1} />
            <Doughnut data={data2} options={options2} />
        </div>
    );
};

export default MyChartComponent;