6

I am using Google Charts API to display a vertical line on a LineChart (at a specific point) using annotations.

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

Desired output

I'm only interested in the annotation line style, not in the annotation text style, 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.

Community
  • 1
  • 1
Ralu Bur
  • 165
  • 1
  • 7

1 Answers1

7

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>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133