Google Charts - Can you align columns in a column chart to the center of the chart?

Question

Is there a way using the column chart provided by the Google charts javascript api to center columns in the middle of the chart rather than having large amounts of space between each column? I can accomplish this by grouping the values together but I lose the label under the column.

Here's a pic of what I'm trying to accomplish:

Here's what I have so far:

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

function drawColColors() {
  const data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    ['1', 1900000],
    ['2', 1800000],
    ['3', 1500000]
  ])

  const options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: { minValue: 0, format: '$###,###,###' },
    enableInteractivity: false,
    bar: { groupWidth: 45 },
    legend: { position: 'none' }
  }

  const chart = new google.visualization.ColumnChart(document.getElementById('chart'))

  chart.draw(data, options)
}

Codesandbox: https://codepen.io/anon/pen/GworqG

user_5090771 · Answer

bar.groupWidth is the only config option that will specifically address column alignment
(in this manner)

however, instead of a number...

bar: {groupWidth: 45},

you can also use a percentage.
This won't necessarily move the columns, but it will make them larger, bringing them closer together.

bar: {groupWidth: '90%'},

see following working snippet for an example...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    ['1', 1900000],
    ['2', 1800000],
    ['3', 1500000]
  ])

  var options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: {minValue: 0, format: '$###,###,###'},
    enableInteractivity: false,
    bar: {groupWidth: '90%'},
    legend: { position: 'none' }
  }

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

another option would be to use actual numbers (1), rather than strings ('1'), on the x-axis.
this enables additional config options you can use to push the columns closer to the center.

for instance, setting the viewWindow will allow you to add space between the visible columns and the edges.

hAxis: {
  viewWindow: {
    min: -2,
    max: 6
  }
}

by default, a continuous axis (numbers) will display grid lines,
whereas a discrete axis (strings) will not.
these can be removed, or hidden, with the following options.

  baselineColor: 'transparent',
  gridlines: {
    color: 'transparent'
  },

see following working snippet for another example...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Number', 'Price'],
    [1, 1900000],
    [2, 1800000],
    [3, 1500000]
  ])

  var options = {
    width: '100%',
    height: 400,
    colors: ['red'],
    vAxis: {minValue: 0, format: '$###,###,###'},
    enableInteractivity: false,
    legend: {position: 'none'},
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        color: 'transparent'
      },
      ticks: data.getDistinctValues(0),
      viewWindow: {
        min: -2,
        max: 6
      }
    }
  }

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

Google Charts - Can you align columns in a column chart to the center of the chart?

1 Answers