Stacked y-Axis on Highcharts, how to make it one?

Question

I successfully created a charts with two y axis using Highcharts JS Library.

However you can see the y-Axis is stacked (Fahrenheit and temperature), is it possible to merge it to one?

Here is my code.

    <script type="text/javascript">
$(function () {

  $('#container').highcharts({
    chart: {
      type: 'line'
    },
    time: {
      timezone: 'Australia/Brisbane'
    },
    title: {
      text: 'Temperature Graph'
    },
    xAxis: {
      type: 'datetime',
      categories: <?php echo json_encode($tgl, JSON_NUMERIC_CHECK); ?>,
      title: {
        text: 'Dates'
      },
    },
    yAxis: [{
      title: {
        text: 'temperature'
      }
    }, {
      title: {
        text: 'Fahrenheit'
      }
    }],
    series: [{
      name: 'Celcius',
      data: <?php echo json_encode($suhu, JSON_NUMERIC_CHECK);?>
    }, {
      name: 'Fahrenheit',
      data: <?php echo json_encode($lembap, JSON_NUMERIC_CHECK); ?>,
      yAxis: 1
    }]
  });
});

</script>

Answer 1

You can render this chart with only one yAxis and use the labels.formatter callback to format the displaying labels and show also the Fahrenheit values.

Demo: https://jsfiddle.net/BlackLabel/L8e9g1n3/

    labels: {
        formatter() {
        let fahrenheitValue = 1.8 * this.value + 32;


        return this.value + " / " + fahrenheitValue
      }
    }

API: https://api.highcharts.com/highcharts/yAxis.labels.formatter

If you need you can customize the tooltip in the same way by using the tooltip.formatter .

API: https://api.highcharts.com/highcharts/tooltip.formatter