How do i change React Google Charts background color?

Question

I am trying to change the background color of the charts to match my body background color.

I have tried to do the two following backgroundColor styles below but it doesn't seem to work. Any ideas on how i can get around this?

<Chart
                height={'300px'}
                width={'370px'}
                chartType='Bar'
                loader={<div>Loading Chart..</div>}
                data={[
                  ['', 'UPLIFT'],
                  ...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
                ]}
                options={{
                  chart: {
                    title: 'Spend Uplift',
             -----> backgroundColor: 'red'
                  },
                  colors: ['#FB7A21']
                }}
              />

<Chart
                height={'300px'}
                width={'370px'}
                chartType='Bar'
                loader={<div>Loading Chart..</div>}
                data={[
                  ['', 'UPLIFT'],
                  ...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
                ]}
                options={{
                  chart: {
                    title: 'Spend Uplift',
                  },
                  colors: ['#FB7A21'],
           -----> backgroundColor: 'red'
                }}
              />

Charmainecharmane

According to the official docs you should be able to use as is. – Waterproof

Answer 1

You need to use chartType as BarChart. For some reason, Bar seems to cause issues. In case you want the chart bars to be vertical, change it to ColumnChart.

You can see the working fiddle here

Projector

Thanks for the help, I've started using ColumnChart now. – Charmainecharmane

Answer 2

'Bar' is considered a Material chart.

vs. 'BarChart', which is a Classic chart.

with Material charts, an options conversion method needs to be used...

google.charts.Bar.convertOptions

which means you would need to access the google.charts namespace.

options={google.charts.Bar.convertOptions({
  chart: {
    title: 'Spend Uplift',
  },
  colors: ['#FB7A21'],
  backgroundColor: 'red'
})}

Dug

Thanks for the help. I couldn't access google.charts namespace so I instead used ColumnChart and everything is working. – Charmainecharmane