HighCharts Y Axis scales aren't correct

Question

I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.

As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).

How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F. Code:

function createChart() {

Highcharts.stockChart('container', {
            alignTicks: false,
    rangeSelector: {
        selected: 4
    },
    chart: {
      renderTo: 'container',
      height: 500,
        alignTicks: false
    },

    yAxis: [{ // Primary yAxis 
    tickAmount: 8,
    tickInterval: 1,
    labels: {
        format: '{value}°F',
        style: {
            color: Highcharts.getOptions().colors[2]
        }
    },
    title: {
        text: 'Temperature',
        style: {
            color: Highcharts.getOptions().colors[2]
        }
    },
    opposite: false

}, { // Secondary yAxis
            tickAmount: 8,
    tickInterval: 10,
    title: {
        text: 'Main Power',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    labels: {
        format: '{value} volts',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    }

}, { // Tertiary yAxis
        tickAmount: 8,
    gridLineWidth: 0,
    title: {
        text: 'Signal Strength',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    labels: {
        format: '{value} %',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    opposite: true
}],




    plotOptions: {
        series: {
            compare: 'percent',
            showInNavigator: true
        }
    },

    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
        valueDecimals: 2,
        split: true
    },

    series: [{
    name: 'Main Power',
    type: 'spline',
    yAxis: 1,
    data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
    tooltip: {
        valueSuffix: ' V'
    }

}, {
    name: 'Signal Strength',
    type: 'spline',
    yAxis: 2,
    data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
    marker: {
        enabled: false
    },
    dashStyle: 'shortdot',
    tooltip: {
        valueSuffix: ' %'
    }

}, {
    name: 'Temperature',
    type: 'spline',
    yAxis: 0,
    data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
    tooltip: {
        valueSuffix: ' °F'
    }
}]
});

Answer 1

Removed the "percent" in:

plotOptions: {
        series: {
            compare: 'percent',
            showInNavigator: true
        }
    },