How can I add stroke around columns of google column chart?

Question

I have used ajax to fetch the data. My code is below:

    let jsonData = $.ajax({
      url: url,
      dataType:"json",
      async: false,
      success: function(jsonData){
        let data = new google.visualization.arrayToDataTable(jsonData);
        let options = {
          title: title,
          width: 600,
          height: 200,
          bar: {groupWidth: "25%"},
          legend: { position: "none" },
          colors: ['skyBlue'],
        };
        let chart = new google.visualization.ColumnChart(document.getElementById(elId));
        chart.draw(data, options);
      }
    }).responseText;

I want to add a stroke or border around the columns using options. How can I add that? Also how to show the gridlines?

Answer 1

unfortunately, there are no configuration options that will add stroke or border around the columns.
you have to use a style column role, see column styles...

basically, you add a style column to the data table, after the y-series column.
the value of the style column represents the style of each column displayed on the chart.

let data = new google.visualization.arrayToDataTable([
  ['x', 'y', {role: 'style', type: 'string'}],
  ['Developer Test', 1, 'stroke-color: #703593; stroke-width: 4;'],
  ['First Staff', 2, 'stroke-color: #703593; stroke-width: 4;'],
]);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  let data = new google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'style', type: 'string'}],
    ['Developer Test', 1, 'stroke-color: #703593; stroke-width: 4;'],
    ['First Staff', 2, 'stroke-color: #703593; stroke-width: 4;'],
  ]);
  let options = {
    title: 'Pending Inspections For Housing',
    width: 600,
    height: 200,
    bar: {groupWidth: '25%'},
    legend: {position: 'none'},
    colors: ['skyBlue'],
  };
  let chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
});

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

---

gridlines are only supported on a continuous axis (number, date, etc.).
they are not supported by a discrete axis (string).

in order to display gridlines for the x-axis, you would need to convert the x-axis to numbers or dates.
we can use object notation in the data table to provide a number value and a formatted string.

let data = new google.visualization.arrayToDataTable([
  ['x', 'y', {role: 'style', type: 'string'}],
  [{v: 1, f: 'Developer Test'}, 1, 'stroke-color: #703593; stroke-width: 4;'],
  [{v: 2, f: 'First Staff'}, 2, 'stroke-color: #703593; stroke-width: 4;'],
]);

we will also need to do the same for the x-axis ticks option.

hAxis: {
  ticks: [{v: 1, f: 'Developer Test'}, {v: 2, f: 'First Staff'}]
}

if you want to add gridlines between the columns,
you can add additional ticks...

hAxis: {
  ticks: [
    {v: 0.5, f: ''},
    {v: 1, f: 'Developer Test'},
    {v: 1.5, f: ''},
    {v: 2, f: 'First Staff'},
    {v: 2.5, f: ''},
  ]
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  let data = new google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'style', type: 'string'}],
    [{v: 1, f: 'Developer Test'}, 1, 'stroke-color: #703593; stroke-width: 4;'],
    [{v: 2, f: 'First Staff'}, 2, 'stroke-color: #703593; stroke-width: 4;'],
  ]);
  let options = {
    title: 'Pending Inspections For Housing',
    width: 600,
    height: 200,
    bar: {groupWidth: '25%'},
    legend: {position: 'none'},
    colors: ['skyBlue'],
    hAxis: {
      ticks: [
        {v: 0.5, f: ''},
        {v: 1, f: 'Developer Test'},
        {v: 1.5, f: ''},
        {v: 2, f: 'First Staff'},
        {v: 2.5, f: ''},
      ]
    }
  };
  let chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
});

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

if you wan