Google Chart columnChart haxis dates are wrong

Question

I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').

  var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
  var data = new google.visualization.DataTable();

  data.addColumn('date', 'Dt');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);

  var options_stacked = {
    isStacked: true,
    height: 300,
    colors: ['#111', '#a00'],
    hAxis: {
     slantedText: false,
     format: 'd/MMM/yy',
    },
    legend: {
      position: 'top',
    },
    vAxis: {
    minValue: 0
  }
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);

A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/

Answer 1

you can add custom ticks to ensure each column "sits" on the correct date.

the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.

var xTicks = data.getDistinctValues(0);

hAxis: {
  slantedText: false,
  format: 'd.MMM.yy',      <---- changed from 'd/MMM/yy' to avoid line breaks
  ticks: xTicks
},

see following working snippet...

function doTest() {
  var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
  var data = new google.visualization.DataTable();

  data.addColumn('date', 'Dt');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);
  
  var xTicks = data.getDistinctValues(0);

  var options_stacked = {
    isStacked: true,
    height: 300,
    colors: ['#111', '#a00'],
    hAxis: {
      slantedText: false,
      format: 'd/MMM/yy',
      ticks: xTicks
    },
    legend: {
      position: 'top',
    },
    vAxis: {
      minValue: 0
    }
  };

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

window.addEventListener('resize', doTest);

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

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

<h1>Google Charts</h1>
<div id="chart_div"></div>