Is there a way to change the width/thickness of the vaxis baseline in google charts?

Question

I want to make the vaxis baseline in my combo chart to be thicker/bolder.

I'm able to change the color with the code below

vAxis: {
    baselineColor: '#FFA500',
},

Is there a way to change the width?

user_5090771 · Answer

no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.

since you're changing the color,
the color can be used to find the baseline element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)

to change the thickness, add attributes for 'stroke' and 'stroke-width'

baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var options = {
    vAxis: {
      baselineColor: '#ffa500',
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
      if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
        baseline.setAttribute('stroke', options.vAxis.baselineColor)
        baseline.setAttribute('stroke-width', '10')
      }
    });
  });

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

Is there a way to change the width/thickness of the vaxis baseline in google charts?

1 Answers