CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
nyvokub
nyvokub

Reputation: 569

How to fix the y-axis in Google charts for 'timeofday' value?

Currently, my y-axis looks like this:

e

Meaning that it only goes as high as the highest value more or less. Is there a way to make it fixed so that it spans the whole duration of the day 00:00-23:59?

I am assuming it will have to be set in the vAxis part of options.

Upvotes: 1

Views: 646

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

you can use --> vAxis.viewWindow.min and max 

  viewWindow: {
    min: [0, 0, 0],
    max: [23, 59, 59]
  }

although the last label may not be shown,
the chart will extend to [23, 59, 59]

you can add --> ticks
to guarantee the last label is shown

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('timeofday', 'y');
  data.addRows([
    ['10-19', [8, 0, 0]],
    ['10-20', [10, 0, 0]]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    vAxis: {
      ticks: [
        [0, 0, 0],
        [4, 0, 0],
        [8, 0, 0],
        [12, 0, 0],
        [16, 0, 0],
        [20, 0, 0],
        [23, 59, 59],
      ],
      viewWindow: {
        min: [0, 0, 0],
        max: [23, 59, 59]
      }
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions