How to set the background color in a LineChart (Google visualization) in Android?

Question

Ok, this sounds like a stupid question. And probably is... sorry if so, but I could not find the answer.

I have a LineChart, and want to set it with black semi transparent background. The WHOLE thing, not just the frame around the chart: I don't want to see any frame.

In Chrome and Firefox this looks great. However, in Android it looks awful, with the chart WHITE (?) and the background black, and I cannot changed it! I've played for a long time with backgroundColor, backgroundColor.fill, colors, CSS, without success. I even tried with both:

google.load('visualization', '1', {packages: ['corechart']});

and

google.load('visualization', '1.1', {packages: ['corechart']});

Is this an Android webview bug or what??

This is my code. First, the CSS of the div containing the chart, and then the LineChart options:

CSS:

  #elevation_chart {
    position: absolute;
    padding: 0px;
    bottom: 3px;
    left: 3px;
    visibility: hidden;
    opacity: 0.5;
  }

Javascript:

var option = {
  legend: 'none',
  height: 100,
  width: 200,
  curveType:'function',
  lineWidth: 2,
  colors: ["#FFFF00"],
  chartArea: {left: 35, width: 160, height: 90 },
  vAxis: {
    gridlines: {color: '#FFF', count: 8},
    baselineColor: 'black',
    textStyle: { color: '#FFF', bold: true },
  },
  backgroundColor: '#000',
  intervals: { 'style':'line' }, // Use line intervals.
  focusTarget: 'category',
  tooltip: { trigger: 'none' },
  }

Thanks!

L.

Answer 1

You want to set the backgroundColor to transparent:

http://jsfiddle.net/63Phz/