javascript - i have faced the issue while creating triple y-axis

Question

i have faced the problem while creating triple y-axis in google charts . The problem is space between right side axis. could you please help me.

i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you

 google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Month');
      data.addColumn('number', "Average Temperature");
      data.addColumn('number', "Average Hours of Daylight");
			data.addColumn('number', "Average 1");
      data.addColumn('number',"Average 2")
      data.addRows([
        [new Date(2014, 0),  -.5,  8.7,7,11],
        [new Date(2014, 1),   .4,  8.7,5,12],
        [new Date(2014, 2),   .5,   12,6,13],
        [new Date(2014, 3),  2.9, 15.7,5,14],
        [new Date(2014, 4),  6.3, 18.6,8,15],
        [new Date(2014, 5),    9, 20.9,8,16],
        [new Date(2014, 6), 10.6, 19.8,9,16],
        [new Date(2014, 7), 10.3, 16.6,7,15],
        [new Date(2014, 8),  7.4, 13.3,8,14],
        [new Date(2014, 9),  4.4,  9.9,12,13],
        [new Date(2014, 10), 1.1,  6.6,11,12],
        [new Date(2014, 11), -.2,  4.5,11,11]
      ]);

   

      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1},
          2: {targetAxisIndex: 2},
          3: {targetAxisIndex: 3}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'},
          2: {title: 'third'},
          3: {title: 'foruth'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };


        var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
        classicChart.draw(data, classicOptions);

    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <br><br>
  <div id="chart_div"></div>

Answer 1

i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this

if you must have three, try textPosition

have one 'in' and the other 'out'

see following example...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");
    data.addColumn('number', "Average 1");
    data.addColumn('number',"Average 2")
    data.addRows([
      [new Date(2014, 0),  -.5,  8.7,7,11],
      [new Date(2014, 1),   .4,  8.7,5,12],
      [new Date(2014, 2),   .5,   12,6,13],
      [new Date(2014, 3),  2.9, 15.7,5,14],
      [new Date(2014, 4),  6.3, 18.6,8,15],
      [new Date(2014, 5),    9, 20.9,8,16],
      [new Date(2014, 6), 10.6, 19.8,9,16],
      [new Date(2014, 7), 10.3, 16.6,7,15],
      [new Date(2014, 8),  7.4, 13.3,8,14],
      [new Date(2014, 9),  4.4,  9.9,12,13],
      [new Date(2014, 10), 1.1,  6.6,11,12],
      [new Date(2014, 11), -.2,  4.5,11,11]
    ]);

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
      chartArea: {
        width: '50%'
      },
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1},
        2: {targetAxisIndex: 2}
      },
      vAxes: {
        0: {
          textPosition: 'out',
          title: 'Temps (Celsius)'
        },
        1: {
          textPosition: 'in',
          title: 'Daylight',
          viewWindow: {
            max: 30
          }
        },
        2: {
          textPosition: 'out',
          title: 'third',
          viewWindow: {
            max: 40
          }
        }
      },
      hAxis: {
        ticks: [
          new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
          new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
          new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
        ]
      },
    };

    var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
    classicChart.draw(data, classicOptions);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>