Change border/background in Google Charts AnnotationChart?

Question

I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?

Without `chart` option

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
    thickness: 1.5,
    displayAnnotations: true,
    colors: dataColors,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
};
chart.draw(data, options);

With:

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
    thickness: 1.5,
    displayAnnotations: true,
    colors: dataColors,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
    chart: {
      backgroundColor: {
        fill:'black',
        stroke: 'white',
        strokeSize: 1
      },
      chartArea: {
        backgroundColor: {
          fill: 'blue',
          stroke: 'red',
          strokeSize: 1
        }
      }
    }
};
chart.draw(data, options);

Either way, graph looks like this:

Pirate X · Answer 1 · 2016-08-27T17:52:41.073

3

The background color can be set using it like this. Read the documentation here

Edit your code like this

var options = {
    displayAnnotations: true,
    displayZoomButtons: false,
    displayExactValues: false,
    displayDateBarSeparator: true,
    chart: {
      backgroundColor: 'blue',
      chartArea: {
       backgroundColor: '#FFF000',
      },

    },
          fill: 50,

};

I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.

Working JSFIDDLE

edited Aug 27 '16 at 17:52

answered Aug 25 '16 at 06:28

Pirate X

3,023
5
33
60

Doesn't work. You're linking to the wrong documentation; while this will work for a line chart, backgroundColor is not implemented for AnnotationCharts. I am asking for a workaround. Please read the question/linked resources. – nrlakin Aug 25 '16 at 22:05
@nrlakin I have update my answer with 'working' JSFIDDLE. – Pirate X Aug 27 '16 at 17:00
1

This looks like a much better answer than mine! – awenborn Aug 31 '16 at 07:35

awenborn · Accepted Answer · 2016-08-26T14:05:25.347

I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.

I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.

Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!

Annotation Chart Fiddle

My Related SO Question

/* One time recoloring of background after SVG creation - for static charts */

var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
  if (rects[i].getAttribute('fill') === '#ffffff') {
    rects[i].setAttribute('fill', '#99f');
  }
}


/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */

var observer = new MutationObserver(function(mutations) {
  var rects = container.getElementsByTagName("rect")
  for(var i=0; i<rects.length; ++i) {
    if (rects[i].getAttribute('fill') === '#ffffff') {
      rects[i].setAttribute('fill', '#99f');
    }
  }
});

You can remove the white shadowing on the text as well by applying the same method to all the `` nodes, filtering for those where `'stroke' === '#fff'` and setting `'stroke-width' = 0`. The chart starts to look quite presentable then. As I said, it's not an ideal method by any means, but it works! [Fiddle for text without white highlight](https://jsfiddle.net/awenborn/94zkmn1g/) — awenborn, Aug 26 '16 at 13:58

Change border/background in Google Charts AnnotationChart?

Without `chart` option

With:

2 Answers2

Linked

Change border/background in Google Charts AnnotationChart?

Without chart option

With:

2 Answers2

Linked

Without `chart` option