CODEWITHSUNDEEP
javascriptgoogle-visualization
nrlakin
nrlakin

Reputation: 5574

Change border/background in Google Charts AnnotationChart?

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: chart w/ generic bg

Upvotes: 2

Views: 1635

Answers (2)

Pirate X
Pirate X

Reputation: 3095

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

Upvotes: 3

awenborn
awenborn

Reputation: 417

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');
    }
  }
});

Upvotes: 1

Related Questions