Google Charts hAxis gridlines dont'work for weekly interval

Question

Google charts should draw vertical lines for each data point - it works good for continuous dates like days, months, but when I provide dates with gaps - as sundays only - it stops to draw vertical lines after some count, even if I specify parameter hAxis.gridlines.count:

This is example:

Note, that major lines for start of month only! This occurs when number of points above ~20. hAxis config:

Looks like google charts has own logic for some cases or have a bug?

jsfiddle demo

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

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        [new Date(2023,04,23), 0],   [new Date(2023,04,30), 10],
        [new Date(2023,05,7), 12], [new Date(2023,05,14), 1],[new Date(2023,05,21), 12], 
        [new Date(2023,05,28), 1], [new Date(2023,06,4), 1], [new Date(2023,06,11), 12],
        [new Date(2023,06,18), 5], [new Date(2023,06,25), 6], [new Date(2023,07,2), 5],
        [new Date(2023,07,9), 5], [new Date(2023,7,16), 3], [new Date(2023,07,23), 15],
      ]);

      var options = {
        hAxis: {
          title: 'Time',
          gridlines: { count: 14 }
        },
        vAxis: {
          title: 'Popularity'
        },
        backgroundColor: '#f1f8e9'
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

@WhiteHat Added in the post. (https://jsfiddle.net/niliand/3q79sywk/12/) — Sergey Ch., Apr 22 '23 at 18:13

score 1 · Accepted Answer · answered Apr 25 '23 at 12:53

I found if you go back to frozen version 45,
you can get gridlines on each point by using the ticks option.

but the chart's sizing appears to work differently with this version.
I needed to add the chartArea, height, & width options to display correctly.

as for the version, I wouldn't recommend using 'current' anyway,
because a bug in the current version, or a change in how something works might conflict with the chart you built before changes were made.

see following working snippet...

google.charts.load('45', {
  packages: ['corechart', 'line']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [new Date(2023, 04, 23), 0],
    [new Date(2023, 04, 30), 10],
    [new Date(2023, 05, 7), 12],
    [new Date(2023, 05, 14), 1],
    [new Date(2023, 05, 21), 12],
    [new Date(2023, 05, 28), 1],
    [new Date(2023, 06, 4), 1],
    [new Date(2023, 06, 11), 12],
    [new Date(2023, 06, 18), 5],
    [new Date(2023, 06, 25), 6],
    [new Date(2023, 07, 2), 5],
    [new Date(2023, 07, 9), 5],
    [new Date(2023, 7, 16), 3],
    [new Date(2023, 07, 23), 15],
  ]);

  var options = {
    backgroundColor: '#f1f8e9',
    chartArea: {
      bottom: 60,
      left: 60,
      height: '100%',
      right: 96,
      top: 16,
      width: '100%'
    },
    hAxis: {
      format: 'M/d/yy',
      title: 'Time',
      ticks: data.getDistinctValues(0)
    },
    height: '100%',
    vAxis: {
      title: 'Popularity'
    },
    width: '100%'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

Thank you for the reply. I'm using angular-google-charts package with some 2021 year version I think, don't think I can manually set version. Looks like this is feature of the later google code. — Sergey Ch., Apr 26 '23 at 07:23

Google Charts hAxis gridlines dont'work for weekly interval

1 Answers1