Google Column Graph Single Date and value showing as multiple adjucent bars

Question

Data Table structure is as follows

    {
  \"cols\": [
    {
      \"id\": \"\",
      \"label\": \"Date\",
      \"pattern\": \"\",
      \"type\": \"date\"
            


        

Answer 1

recommend setting the min / max values on the viewWindow explicitly

keeping within a day should prevent "column overflow"

  viewWindow: {
    min: new Date(dateRange.min.getTime() - oneDay),
    max: new Date(dateRange.max.getTime() + oneDay)
  }

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).on('resize', drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "",
        "label": "Date",
        "pattern": "",
        "type": "date"
      },
      {
        "id": "Col1",
        "label": "Col1 Label",
        "pattern": "",
        "type": "number"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "Date(2017, 5, 27)"
          },
          {
            "v": 213
          }
        ]
      }
    ]
  });

  var oneDay = (1000 * 60 * 60 * 24);
  var dateRange = data.getColumnRange(0);
  var chart = new google.visualization.ColumnChart($('.chart')[0]);
  chart.draw(data, {
    hAxis: {
      slantedText: true,
      slantedTextAngle: 35,
      textStyle: {
        bold: true,
        fontSize: 8,
        color: '#4d4d4d'
      },
      viewWindow: {
        min: new Date(dateRange.min.getTime() - oneDay),
        max: new Date(dateRange.max.getTime() + oneDay)
      }
    }
  });
}

---

not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...

Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.

but none have ever worked for me when only one row of data...