Skip to content Skip to sidebar Skip to footer

I Have Faced The Issue While Creating Triple Y-axis

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 snipp

Solution 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([
      [newDate(2014, 0),  -.5,  8.7,7,11],
      [newDate(2014, 1),   .4,  8.7,5,12],
      [newDate(2014, 2),   .5,   12,6,13],
      [newDate(2014, 3),  2.9, 15.7,5,14],
      [newDate(2014, 4),  6.3, 18.6,8,15],
      [newDate(2014, 5),    9, 20.9,8,16],
      [newDate(2014, 6), 10.6, 19.8,9,16],
      [newDate(2014, 7), 10.3, 16.6,7,15],
      [newDate(2014, 8),  7.4, 13.3,8,14],
      [newDate(2014, 9),  4.4,  9.9,12,13],
      [newDate(2014, 10), 1.1,  6.6,11,12],
      [newDate(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: [
          newDate(2014, 0), newDate(2014, 1), newDate(2014, 2), newDate(2014, 3),
          newDate(2014, 4),  newDate(2014, 5), newDate(2014, 6), newDate(2014, 7),
          newDate(2014, 8), newDate(2014, 9), newDate(2014, 10), newDate(2014, 11)
        ]
      },
    };

    var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
    classicChart.draw(data, classicOptions);
  },
  packages:['corechart']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Post a Comment for "I Have Faced The Issue While Creating Triple Y-axis"