CODEWITHSUNDEEP
javascriptreactjsreact-google-charts
edche
edche

Reputation: 680

How to change options Google Charts Bar in react?

I am trying to create a bar chart with Google charts in react. I am researching for options field but I found when chartType="Bar", the normal graph options doesn't work. It should be chartType="BarChart"for working. But when I do this chart will be horizontal, I want vertical. This is my code, how can I change backgroundColor or use options?

<Chart
            width={550}
            height={350}
            chartType="Bar"
            loader={<div>Grafik Yükleniyor...</div>}
            data={[
                ['Year', '2019/12', '2020/12'],
                ['Karlılık', 1000, 400],
                ['Verimlilik', 1170, 460],
                ['Kaldıraç', 660, 1120],
                ['Özkaynak', 1030, 540],
              ]}
            options={{

                colors: ['#0b2573','#2f8226'],
                animation: {
                        duration: 2000,
                        easing: 'linear',
                        startup: true
                },
                backgroundColor: "transparent",
                    
                
                
            }}
            // For tests
            rootProps={{ 'data-testid': '2' }}
            />
            
        </Col>

Upvotes: 2

Views: 1801

Answers (1)

jaesle
jaesle

Reputation: 576

I believe that this is what you're looking for. You need to set the chart to 'ColumnChart' and not 'Bar'. Also, you had the color set to transparent instead of an actual color value.

  <Chart
    width={550}
    height={350}
    chartType="ColumnChart"
    loader={<div>Grafik Yükleniyor...</div>}
    data={[
      ['Values', '2019/12', '2020/12'],
      ['Karlılık', 1000, 400],
      ['Verimlilik', 1170, 460],
      ['Kaldıraç', 660, 1120],
      ['Özkaynak', 1030, 540],
    ]}
    options={{
      title: 'Some Values',
      chartArea: { width: '50%' },
      hAxis: {
        title: 'Measures',
        minValue: 0,
      },
      vAxis: {
        title: 'Amount',
      },
      backgroundColor: '#E4E4E4',
    }}
    legendToggle
  />

Upvotes: 2

Related Questions