Как я могу сделать BarChart вертикальным в реакции-Google-чартах

Question

Я использую литературную реакцию-гугл-графики, для моего проекта мне нужно использовать вертикальные полосы, такие как chartType = "BarChart".проблема в том, что мне нужно это по вертикали.

Я пытался добавить «бары:« вертикальный »» к опциям, и везде я проверял все примеры, где строился график без компонента.Что мне использовать, что я получаю от компонента реагирования.

Это пример, который я использую.

https://react -google-charts.com / bar-chart #бары маркировки

<Chart
  width={'500px'}
  height={'300px'}
  chartType="BarChart"
  loader={<div>Loading Chart</div>}
  data={[
    [
      'Element',
      'Density',
      { role: 'style' },
      {
        sourceColumn: 0,
        role: 'annotation',
        type: 'string',
        calc: 'stringify',
      },
    ],
    ['Copper', 8.94, '#b87333', null],
    ['Silver', 10.49, 'silver', null],
    ['Gold', 19.3, 'gold', null],
    ['Platinum', 21.45, 'color: #e5e4e2', null],
  ]}
  options={{
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600,
    height: 400,
    bar: { groupWidth: '95%' },
    legend: { position: 'none' },
  }}
/>

Что мне здесь не хватает?

Спасибо,

Answer 1

Попробуйте использовать chartType="ColumnChart" вместо этого. пример

<Chart
  width={'500px'}
  height={'300px'}
  chartType="ColumnChart"
  loader={<div>Loading Chart</div>}
  data={[
    [
      'Element',
      'Density',
      { role: 'style' },
      {
        sourceColumn: 0,
        role: 'annotation',
        type: 'string',
        calc: 'stringify',
      },
    ],
    ['Copper', 8.94, '#b87333', null],
    ['Silver', 10.49, 'silver', null],
    ['Gold', 19.3, 'gold', null],
    ['Platinum', 21.45, 'color: #e5e4e2', null],
  ]}
  options={{
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600,
    height: 400,
    bar: { groupWidth: '95%' },
    legend: { position: 'none' },
  }}
/>