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'
                }}
              />

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'
                }}
              />

• javascript
• reactjs
• charts
• google-visualization

• According to the official docs you should be able to use as is. – silentw Commented Aug 19, 2019 at 16:28

2 Answers 2

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

'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'
})}