title: Highcharts multiple y axis with data from csv file
body: <p>I've been creating charts on my company's website with data that is populated from a csv file. I need to add two additional y axes on the right side of the chart. I tried doing so by following Highchart's instructions, but my data is coming from a CSV file and I can't manage to get the two additional axes to connect to the data. Meaning, the other two splines look flat compared to the one that is actually plotting to it's y axis.</p>
  
  <p>Below is the chart's JS file. The CSV file is 4 columns, which from left to right are Date, Overall, VIX, GSPC</p>
  
  <p>Thank you in advance!</p>
  
  <pre><code>function basi_overall_chart() {
      //var to catch any issues while getting data 
      var jqxhr_basi_overall = $.get('../../datafiles/basi/company_BASI_Overall_VIXSP.csv', function (data) {
          var options = {
              //chart options 
              chart: {
                  //set type of graph, where it renders
                  type: 'line',
                  renderTo: 'basi_overall_container'
              },
              //set title of graph
              title: {
                  text: 'company Bid-Ask Spread Index (BASI)',
                  style: {
                      color: '#4D759E'
                  },
                  align: 'center'
              },
              //set xAxis title
              xAxis: {
                  title: {
                      text: 'Date',
                      style: {
                          color: '#4D759E',
                          fontWeight: 'bold'
                      }
                  }
              },
              //set yAxis info 
              yAxis: [{
                  title: {
                      text: 'Basis Points (BPS)',
                      style: {
                          color: '#4D759E',
                          fontWeight: 'bold'
                      }
                  },
                  labels: {
                      //give y-axis labels commas for thousands place seperator
                      formatter: function () {
                          return Highcharts.numberFormat(this.value);
                      }
                  }, 
                  //set y-axis to the left side
                  opposite: false,
                  //set background grid line width
                  gridLineWidth: 1
              },  { // Second yAxis
                  gridLineWidth: 1,
                  title: {
                      text: 'VIX',
                      style: {
                          color: '#de5a3c',
                          fontWeight: 'bold'
                      }
                  },
                  labels: {
                      formatter: function () {
                          return Highcharts.numberFormat(this.value);
                      }
                  },
                  opposite: true
              }, { // Third yAxis
                  gridLineWidth: 1,
                  title: {
                      text: 'SP',
                      style: {
                          color: '#4D759E',
                          fontWeight: 'bold'
                      }
                  },
                  labels: {
                      formatter: function () {
                          return Highcharts.numberFormat(this.value);
                      }
                  },
                  opposite: true
          }],
              //stylize the tooltip 
              tooltip: {
                  pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;',
                  valueDecimals: 4
              },
              //enable and stylize the legend
              legend: {
                  enabled: true,
                  layout: 'horizontal',
                  align: 'center',
                  borderWidth: 1,
                  borderRadius: 5,
                  itemDistance: 20,
                  reversed: false
              },
              //set the starting range. 0-5. 5="All", 4="1yr", etc
              rangeSelector: {
                  selected: 5,
                  allButtonsEnabled: true
              },
              //set general plot options 
              plotOptions: {},
              //disable credits
              credits: {
                  enabled: false
              },
              //make download as csv format correctly
              navigator: {
                  series: {
                      includeInCSVExport: false
                  }
              },
              //set name of chart downloads
              exporting: {
                  filename: 'company_basi_overall',
                  //enable download icon
                  enabled: true,
                  //add image to download
                  chartOptions: {
                      chart: {
                          events: {
                              load: function () {
                                  this.renderer.image('http://www.company.com/images/company_logo2.gif', 90, 75, 300, 48).attr({
                                      opacity: 0.1
                                      }).add();
                              }
                          }
                      },
                      //remove scrollbar and navigator from downloaded image
                      scrollbar: {
                          enabled: false
                      },
                      navigator:{
                          enabled: false
                      }
                  },
                  //make download as csv format correctly
                  csv: {
                      dateFormat: '%Y-%m-%d'
                  }
              },
              //set graph colors
              colors: ['#002244', '#DBBB33', '#43C5F3', '#639741', '#357895'],
              //series to be filled by data 
              series: []
          };
          //names of labels in order of series. make sure they are the same as series header in data file
          var names = ['BASI', 'VIX', 'SP'];
          //get csv file, multiply by 100 (divide by .01) and populate chart
          readCSV(options, data, 1.0, names);
          var chart = new Highcharts.StockChart(options);
  
      })
          //catch and display any errors 
          .fail(function (jqxhr_basi_overall, exception) {
              ajaxError(jqxhr_basi_overall, exception, '#basi_overall_container');
      });
  
  }
  
  (function () {
  
      //set high level chart options for all charts
      Highcharts.setOptions({
          lang: {
              thousandsSep: ','
          }
      });
  
      $('.chart_container').toggle(false);
      basi_overall_chart();
      $('#basi_overall_container').toggle(true);
      all_crossable_volume_chart();
      auto_assign_toggle_chart_buttons();
  })();
  </code></pre>