javascript - How do i change React Google Charts background color? - Stack Overflow

admin管理员组

文章数量:1400161

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

Share Improve this question Follow edited Aug 19, 2019 at 16:48 WhiteHat 61.3k77 gold badges5353 silver badges136136 bronze badges asked Aug 19, 2019 at 16:21 Kaishan PatelKaishan Patel 6911 silver badge22 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptHow do i change React Google Charts background colorStack Overflow