Secondary Axis to Scale on Chart

I am trying to get both lines on my chart to scale correctly, I have read through the documentation but can't seem to find how to do this.

images

The above image shows what happens to the orange line when a secondary axis is added. It's like they are using the same scale rather than their own.

I currently have the below code:

$(function(e) {

/*-----echart1-----*/
var options = {
    chart: {
        height: 300,
        type: "line",
        stacked: false,
        toolbar: {
            enabled: false
        },
        dropShadow: {
            enabled: true,
            opacity: 0.1,
        },
    },
    colors: ["#f99433", '#6759C8'],
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: "straight",
        width: [3, 3, 0],
        dashArray: [0, 4],
        lineCap: "round"
    },
    grid: {
        padding: {
            left: 0,
            right: 0
        },
        strokeDashArray: 3
    },
    markers: {
        size: 0,
        hover: {
            size: 0
        }
    },
    series: [{
        name: "Price",
        type: 'line',
        data: ["4.12","4.08","3.98","3.99","3.95","4.01"]       }, {
        name: "Socials",
        type: 'line',
        data: ["23","17","6","6","7","7"]       }],
    yaxis: [
    {
        title: {
        text: "Price",
        },
    },
    {
        opposite: true,
        title: {
        text: "Socials"
        }
    }
    ],
    xaxis: {
        type: "month",
        categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
        axisBorder: {
            show: false,
            color: 'rgba(119, 119, 142, 0.08)',
        },
        labels: {
            style: {
                color: '#8492a6',
                fontSize: '12px',
            },
        },
    },
    fill: {
        gradient: {
          inverseColors: false,
          shade: 'light',
          type: "vertical",
          opacityFrom: 0.85,
          opacityTo: 0.55
        }
      },
    tooltip: {
        show:false
    },
    legend: {
        position: "top",
        show:true
    }
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();