HighCharts error #18: Requested Axis Does not exist

Question

I am new to HighCharts and I am trying to display 2 graphs on the same x-axis) axis like shown here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/.

However, I get an error message: This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.

The error occurs in "chart1"

The html and JAVASCRIPT code is as follows:

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    high=[],
    day=[],
    chanceOfRain=[],
    humid_final = [],
    day_final=[],
    high_final=[],
    chanceOfRain_final=[]

  $.getJSON(url, function (json) {

    $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);

      high.push(data.high);
      day.push(data.Day);
      chanceOfRain.push(data.chanceOfRain);

    });

    console.log(date);
    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]));
        high_final.push(parseFloat(high[i]));
        day_final.push(parseFloat(day[i]));
        chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
      } else {
       humid_final.push(null)
      };
    }

    console.log("day_final", day_final);


    var chart = new Highcharts.chart({
      chart: {
        type: 'spline',
        renderTo: 'light',
        marginBottom: 200
      },
      title: {
        text: 'indicatorName'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: 'Ambient Light Level'
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
        name: 'light level',
        data: high_final //
      }]
    });


 var chart1= Highcharts.chart('temp&humid',{
      chart: {
        zoomType:'xy'
      },
      title:{
        text:'Humidity and temperature'
      },

      xAxis:{
        categories: [1,2,3],
        crosshair: true
      },

      yAxis: [{
        labels:{
          format: '{value}°C',
          style: {
            color: Highcharts.getOptions().colors[2]
          }
        },
        title:{
          text: 'Temperature',
          style:{
            color: Highcharts.getOptions().colors[2]
          }
        },
        opposite: true
      },
      { //secondary Y AXIS
        gridLineWidth: 0,
        title:{
          text: 'Humidity',
          style:{ 
            color: Highcharts.getOptions().colors[0]
          }
        },
        labels:{
          format: '{value}%',
          style:{
            color:Highcharts.getOptions().colors[0]
          }
        }
      }] 
     ,

      tooltip:{shared:true},

      legend:{
      layout: 'vertical',
      align:'left',
      x:80,
      verticalAlign: 'top',
      y: 55,
      floating:true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
      },

      series:[{
        name:'Humidity',
        type: 'column',
        yAxis:1,
        data:[12,3],
        tooltip:{valueSuffix: ' %'}
      },
      {
        name:'Temperature',
        type:'spline',
        yAxis:2,
        data: [1,2,3],
        tooltip:{valueSuffix: ' °C'}
      }]

    });

  }); //getJSON method
  setTimeout(updat, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>

Answer 1

You are doing the following:

series:[{
    yAxis:1,
  },
  {
    yAxis:2,
  }]

You need to do:

series:[{
    yAxis:0,
  },
  {
    yAxis:1,
  }]

The problem is that axes start indexing at 0. So your index where you set temperature to axis 2 does not work because there is no axis 2. In the demo there are 3 axes, which is why it works with these definitions.