Google Chart, Background color for each group

Question

I need to create a chart and that should be grouped by 7 records/bars. I did that as below. But I need a background color for each group. So I tried with chartArea: {width: '100%', backgroundColor: 'silver'} andbackgroundColor: 'silver' but it applies the color to the entire chart area and chart but not to the each group.

Also I did see the rendered output to wrap a div/span around each group to apply CSS background, but it seems not possible to wrap like I thought.

Is there way to apply background color for each group with white space between them? Here's the code:

  google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawColumnChart);
    function drawColumnChart() {
      var data = google.visualization.arrayToDataTable([
        ['Date', 'Value',{ role: 'style' }, 'Value',{ role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }],
          ['1-7', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['8-14', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
          ['15-21', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],

        ]);

      var options = {
        legend: { position: "none" },
         vAxis: {
            gridlines: {
                color: 'transparent'
            }
         }, 
      };
        var container = document.getElementById('column-chart');
       var containerBounds = container.getBoundingClientRect();
      var chart = new google.visualization.ColumnChart(container);
        google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();

  });
      chart.draw(data, options);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="chart_container">

      <div id="column-chart" class="chart-div"></div>
    </div>

Answer 1

we can use a combo chart, and use an area series as the background.

but we won't be able to get there using strings on the x-axis,
we'll have to use numbers.

however, we can use object notation,
in order to set the value (v:) and display the formatted value (f:)

{v: 1, f: '1-7'}

we can also use the above in our x-axis ticks...

  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],

so we set the bar groups at 1, 3, & 5.
then use an area series for the background at 0-2, 2-4, & 4-6.

first, create the data table using object notation for the x-axis.

var data = google.visualization.arrayToDataTable([
  ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
  [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);

then we add our area series columns and the values on separate rows.
the value for the area series should be the max visible value on the y-axis.

var colArea = data.addColumn('number', 'Area');
var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

var row = data.addRow();
data.setValue(row, 0, 0);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');

row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');

row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
row = data.addRow();
data.setValue(row, 0, 6);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');

in our options, we hide the x-axis gridlines,
set the tick labels, and set the visible range.

hAxis: {
  gridlines: {
    color: 'transparent'
  },
  ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
  viewWindow: {
    min: 0,
    max: 6
  }
},

and add the options for the series types...

series: {
  7: {
    areaOpacity: 1,
    type: 'area'
  }
},
seriesType: 'bars',

see following working snippet...

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

function drawColumnChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
    [{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
    [{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
  ]);

  var colArea = data.addColumn('number', 'Area');
  var colAreaStyle = data.addColumn({role: 'style', type: 'string'});

  var row = data.addRow();
  data.setValue(row, 0, 0);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');
  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'cyan');

  row = data.addRow();
  data.setValue(row, 0, 2);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');
  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'magenta');

  row = data.addRow();
  data.setValue(row, 0, 4);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');
  row = data.addRow();
  data.setValue(row, 0, 6);
  data.setValue(row, colArea, 10);
  data.setValue(row, colAreaStyle, 'lime');

  var options = {
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
      viewWindow: {
        min: 0,
        max: 6
      }
    },
    legend: {
      position: "none"
    },
    series: {
      7: {
        areaOpacity: 1,
        type: 'area'
      }
    },
    seriesType: 'bars',
    vAxis: {
      gridlines: {
        color: 'transparent'
      }
    },
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_container">
  <div id="column-chart" class="chart-div"></div>
</div>