How to style annotation lines in Google Charts?

annotations, google-visualization

Solution

first, recommend using `loader.js` to load the library (vs. `jsapi`)

according to the release notes...

The version of Google Charts that remains available via the `jsapi` loader is no longer being updated consistently. Please use the new gstatic loader (`loader.js`) from now on.

this will change the `load` statement, nothing else...

next, to change the annotation line color, use the following config option...

`annotations.stem.color`

although no option exists for line thickness, it can be changed manually, when the chart's `'ready'` event fires

the annotation is drawn using a `<rect>` element

just need a way to find it in the dom

the following working snippet uses the annotation line color, to find the annotation `<rect>` and change the width

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>

Problem

Original source

Related problems

• How to change color of annotation text in google-charts