Google embed api set chart background color

Question

i am trying to edit the background colour of my chart however it isnt working i can only edit the background colour of the full thing not the chart area, my code is below

var sessions = {
        query: {
            dimensions: 'ga:date',
            metrics: 'ga:sessions'
        },
        chart: {
            type: 'LINE',
            options: {
                width: '100%',
                title: 'Sessions',
                titleTextStyle: {
                    color: '#0f55c4',
                    fontSize: '16',
                    bold: true
                }
            }
        }
    };

I have tried all the following combinations none have worked;

backgroundColor: 'red', (changed background colour not chart colour)

chartArea: {
        backgroundColor:'red'
    } (again background colour only)

chartArea: {
    backgroundColor: {
        fill: 'red'
    }
} (again background colour only)

chartArea: {
    fill: 'red'
} (doesn't work)

Not to sure what else i can try I've tried everything i can find in the documentation and several sites nothing seams to work it just goes onto the whole background not just the chart area, any help is greatly appreciated.

Thanks.

Henrik Aronsson Henrik Aronsson · Accepted Answer · 2015-05-19T12:26:38

According to the documentation you're able to change the background color and the backgroundcolor of the chartArea.

I'm able to change both of these colors with the following option:

    var options = {
    backgroundColor: '#ccc',
    chartArea: {
        backgroundColor:'#e5e5e5'
    }
};

Fiddle.

Sadly I'm not familiar with the way you have arranged your options and such, but my guess would be that you should place this option within

 options: {
                width: '100%',
.....
                chartArea: {
                     backgroundColor:'#e5e5e5'
                }
.......
};

I hope this helps you out!

Google embed api set chart background color

1 Answers