Google Chart Background Color

I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area? Thanks

标签： charts google-visualization

7条回答

【Aperson】

2楼-- · 2019-01-18 09:17

Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?

See Google Charts documentation.

0人赞添加讨论(0) 举报

SAY GOODBYE

3楼-- · 2019-01-18 09:17

The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.

In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.

In case a feature is supported by both the Material chart sometimes requires different format for the options.

<body>
  <div id="classic_div"></div>
  <div id="material_div"></div>
</body>

JS:

  google.charts.load('current', { 'packages': ['corechart', 'bar'] });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,    400],
      ['2005',  1170,    460],
      ['2006',   660,   1120],
      ['2007',  1030,    540],
      ['2009',  1120,    580],
      ['2010',  1200,    500],
      ['2011',  1250,    490],
    ]);
    var options = {
      width: 1000,
      height: 600,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
      // for that use fillOpacity versions
      // Colors only the chart area, simple version
      // chartArea: {
      //   backgroundColor: '#FF0000'
      // },
      // Colors only the chart area, with opacity
      chartArea: {
        backgroundColor: {
          fill: '#FF0000',
          fillOpacity: 0.1
        },
      },
      // Colors the entire chart area, simple version
      // backgroundColor: '#FF0000',
      // Colors the entire chart area, with opacity
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.8
      },
    }

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
    classicChart.draw(data, options);

    var materialChart = new google.charts.Bar(document.getElementById('material_div'));
    materialChart.draw(data, google.charts.Bar.convertOptions(options));
  }

Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

0人赞添加讨论(0) 举报

Explosion°爆炸

4楼-- · 2019-01-18 09:21

It is easier using the options.

drawChart() {
    // Standard google charts functionality is available as GoogleCharts.api after load
    const data = GoogleCharts.api.visualization.arrayToDataTable([
        ['Chart thing', 'Chart amount'],
        ['Na Meta', 50],
        ['Abaixo da Meta', 22],
        ['Acima da Meta', 10],
        ['Refugos', 15]
    ]);

    let options = {
      backgroundColor: {
        gradient: {
          // Start color for gradient.
          color1: '#fbf6a7',
          // Finish color for gradient.
          color2: '#33b679',
          // Where on the boundary to start and
          // end the color1/color2 gradient,
          // relative to the upper left corner
          // of the boundary.
          x1: '0%', y1: '0%',
          x2: '100%', y2: '100%',
          // If true, the boundary for x1,
          // y1, x2, and y2 is the box. If
          // false, it's the entire chart.
          useObjectBoundingBoxUnits: true
        },
      },
    };

    const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
    chart.draw(data, options);
}

I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.

0人赞添加讨论(0) 举报

Emotional °昔

5楼-- · 2019-01-18 09:26

pass the options like this

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};

0人赞添加讨论(0) 举报

Anthone

6楼-- · 2019-01-18 09:27

add this to your options:

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }

0人赞添加讨论(0) 举报

Luminary・发光体

7楼-- · 2019-01-18 09:34

Simply add background option

  backgroundColor: {
        fill:'red'     
        },

here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/

0人赞添加讨论(0) 举报

1 2 下一页

Google Chart Background Color

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间