Google line chart remove background color

Question

I can't find the answer for this one on SO or in the google docs. Considering the following configuration how can I remove this super annoying background? Desperately trying to find the right property in the docs without success: https://developers.google.com/chart/interactive/docs/gallery/linechart

  chart: {
    type: 'LINE',
    options: {
      width: '100%',
      colors: [colors.primary.fresh],
      // what property to target here? I've tried most...
    }
  }

WhiteHat WhiteHat · Accepted Answer · 2020-08-04T18:01:36

areaOpacity: 0 is the option I think you are looking for...

HOWEVER, this option only works on Area charts, not Line charts.
not sure it will work for you.

see following Area chart, with the fill color removed.

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0
    }
  });
  chart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

see following Line chart, with the fill color added (doesn't work).

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0.3
    }
  });
  chart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

and just for reference, see following Area chart, with the fill color added.

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0.3
    }
  });
  chart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google line chart remove background color

1 Answers