Google Visualization ComboChart in quarterly dates displays too many hAxis Labels

Question

How do I eliminate the redundant labels across the hAxis?
My dataset has 8 first of month dates representing the last 8 quarters. I'm getting a lot of extra hAxis labels that I have not been able to remove. I've tried working with the gridline settings but had no luck cleaning the chart up. My goal is one label per bar.

Can someone please point me in the correct direction?
As always thank you for the assitance!

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time of Day');
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  data.addRows([
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ]);


  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90,
      type: "discrete",
      format: 'yyyy-QQ',
      //gridlines: { count: -1 },
      //minorGridlines: {count: 0},
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: "linear"
      }
    },

  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(data, options);

}

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

<div id="chart_div"></div>

Answer 1

the problem results from the x-axis being a continuous axis (date)
the chart is displaying different dates along the x-axis,
however, the format of the date causes duplicate labels to be displayed.

there are a couple ways to resolve...

1) provide custom ticks for the x-axis, to display one label per bar

2) convert the date column to a string, which results in a Discrete axis

following are examples of both...

1) provide custom ticks for the x-axis, to display one label per bar

the ticks configuration option takes an array of values,
which must be of the same data type as the axis (date)

as such, build an array of values from the first data table column

// build x-axis ticks
var xAxisTicks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  xAxisTicks.push(data.getValue(i, 0));
}

then use those ticks in the hAxis options

hAxis: {
  slantedText: true,
  slantedTextAngle: 90,
  type: 'discrete',
  format: 'yyyy-QQ',
  ticks: xAxisTicks  // <-- include custom ticks
},

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time of Day');
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  data.addRows([
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ]);

  // build x-axis ticks
  var xAxisTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    xAxisTicks.push(data.getValue(i, 0));
  }

  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90,
      format: 'yyyy-QQ',
      ticks: xAxisTicks  // <-- include custom ticks
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: 'linear'
      }
    },
  };

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

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

<div id="chart_div"></div>

2) convert the date column to a string, which results in a Discrete axis

first, change the data type of the first data table column to string

data.addColumn('string', 'Time of Day');  // <-- change to string

next, we'll need a date formatter to convert the date to the desired format

// create date formatter to convert x-axis values to string
var formatDate = new google.visualization.DateFormat({
  pattern: 'yyyy-QQ'
});

then, we'll hold the data in a separate variable and convert the date to string before adding the rows to the data table

// hold raw data in a variable
var dataRaw = [
  [new Date(2023, 0, 1), 5, 6],
  [new Date(2023, 3, 1), 7, 6],
  [new Date(2023, 6, 1), 3, 6],
  [new Date(2023, 9, 1), 1, 6],
  [new Date(2024, 0, 1), 5, 6],
  [new Date(2024, 3, 1), 7, 6],
  [new Date(2024, 6, 1), 3, 6],
  [new Date(2024, 9, 1), 1, 6],
];

// convert date to formatted string
dataRaw = dataRaw.map(function (row) {
  row[0] = formatDate.formatValue(row[0]);
  return row;
});

// add converted data to data table
data.addRows(dataRaw);

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time of Day');  // <-- change to string
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  // create date formatter to convert x-axis values to string
  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy-QQ'
  });

  // hold raw data in a variable
  var dataRaw = [
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ];

  // convert date to formatted string
  dataRaw = dataRaw.map(function (row) {
    row[0] = formatDate.formatValue(row[0]);
    return row;
  });

  // add converted data to data table
  data.addRows(dataRaw);

  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: 'linear'
      }
    },
  };

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

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

<div id="chart_div"></div>