CODEWITHSUNDEEP
javascriptreactjschartsgoogle-visualization
Kaishan Patel
Kaishan Patel

Reputation: 69

How do i change React Google Charts background color?

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

Upvotes: 6

Views: 9024

Answers (2)

WhiteHat
WhiteHat

Reputation: 61275

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

Upvotes: 1

yaswanth
yaswanth

Reputation: 2477

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

Upvotes: 3

Related Questions