Google Charts - Plot different things in different parts of the chart

So I'm currently building a financial chart with price information, account balance and an additional technical indicator, my current issue is that whilst displaying price information or account balance is fairly straight forward and non-obstructive, displaying the additional technical indicator puts it in the way of the other information as it is oscillating in value.

This is what I currently have but ideally I'd want the RSI to be at the bottom of the chart like so: (only the position of having the technical indicator at the bototm)

My current code to generate this

<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart', 'line'] });
    google.charts.setOnLoadCallback(drawCurveTypes);

    function drawCurveTypes() {
        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Date');
        data.addColumn('number', 'Backtest');
        data.addColumn('number', 'BTCUSDT');

        data.addColumn({ 'type': 'string', 'role': 'style' })
        data.addColumn('number', 'RSI');

        data.addRows([date, balance, price, null, rsi]);

    var options = {
        hAxis: {
            title: 'Time',
        },
        vAxes: {
            // Adds titles to each axis.
            0: { title: 'Price' },
            1: { title: 'Backtest' },
            2: { title: 'RSI'},
        },
        series: {
            0: { targetAxisIndex: 0 },
            1: { targetAxisIndex: 1 },
            2: { targetAxisIndex: 2 }
        },
        explorer: {
            axis: 'horizontal',
            keepInBounds: true,
            maxZoomIn: 20
        },
        colors: ['#6C91DB', 'black','orange'],
        pointSize: 1,
        dataOpacity: 0.7
        
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
        }
</script>