How to style annotation lines in Google charts?

Question

I use Google Charts APIto display a vertical line on LineChart(at a certain point) with annotations.

Is it possible to style the annotation line to make it more visible. (change its color / thickness if I add vertical gridlines, etc.)?

Desired Conclusion

I'm only interested in the line style of the annotation line>, not the style of the annotation text as asked in this question.

I have the following code:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', '');
  data.addColumn({
    type: 'boolean',
    role: 'certainty'
    });

  data.addRows([
    ["-6", null, 1, true],
    ["-5", null, 2, true],
    ["-4", null, 4, true],
    ["-3", null, 8, true],
    ["-2", null, 7, true],
    ["-1", null, 7, true],
    ["0", '', 8, true],
    ["1", null, 4, false],
    ["2", null, 2, false],
    ["3", null, 3, false],
    ["4", null, 3, false],
    ["5", null, 1, false],
    ["6", null, 1, false]
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
      curveType: 'function',
      width: 500,
      height: 400,
      annotations: {
        style: 'line'
      }
  });
}

You can play with the code in this fiddle .

Answer 1

, loader.js (vs. jsapi)

...

Google Charts, jsapi, . gstatic loader (loader.js).

load, ...

next, , ...

annotations.stem.color

, ,
'ready'

<rect>

dom

,
<rect>

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', '');
  data.addColumn({
    type: 'boolean',
    role: 'certainty'
  });

  data.addRows([
    ["-6", null, 1, true],
    ["-5", null, 2, true],
    ["-4", null, 4, true],
    ["-3", null, 8, true],
    ["-2", null, 7, true],
    ["-1", null, 7, true],
    ["0", '', 8, true],
    ["1", null, 4, false],
    ["2", null, 2, false],
    ["3", null, 3, false],
    ["4", null, 3, false],
    ["5", null, 1, false],
    ["6", null, 1, false]
  ]);

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

  var annotationColor = '#ff00ff';

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if (rect.getAttribute('fill') === annotationColor) {
        rect.setAttribute('width', '8');
      }
    });
  });

  chart.draw(data, {
    curveType: 'function',
    width: 500,
    height: 400,
    annotations: {
      stem: {
        color: annotationColor
      },
      style: 'line'
    }
  });
}

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

Hide result