Google Column Graph Single Date and value showing

Data Table structure is as follows

    {
  "cols": [
    {
      "id": "",
      "label": "Date",
      "pattern": "",
      "type": "date"
    },
    {
      "id": "Col1",
      "label": "Col1 Label",
      "pattern": "",
      "type": "number"
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "Date(2017, 5, 27)"
        },
        {
          "v": 213
        }
      ]
    }
  ]
}

H Axis options

        hAxis: {
      slantedText: true, slantedTextAngle: 35,
      titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
      textStyle: {
        bold: true, fontSize: 8, color: '#4d4d4d'
      },
      maxAlternation: 1,
      showTextEvery: 1,
      viewWindowMode : 'maximized',
      gridlines:
      {
        count: 31
      },
       bar: { groupWidth: 40 }

    }

But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date

This issue happening only for single date.

I want to display the column chart as single bar instead of big rectangle.

Any feedback appreciated

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)
      }
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>

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