react-google-charts - 调整谷歌图表的大小以同样适合所有组件

Question

我正在使用ComboChart图书馆React Google Chart。这是我的功能组件的外观：

import React from 'react';
import { Chart } from 'react-google-charts';

export default function TimeSeriesChart({
  vAxisTitle,
  vAxisSecondTitle,
  hAxisTitle,
  dataHeaders,
  barColors,
}) {
  return (
    <Chart
      chartType='ComboChart'
      loader={<div>Loading Chart</div>}
      data={[
        dataHeaders,
        ['July 1, 2021', 165, 938],
        ['July 2, 2021', 135, 1120],
        ['July 3, 2021', 157, 1167],
        ['July 4, 2021', 139, 1110],
        ['July 5, 2021', 136, 691],
      ]}
      options={{
        // title: 'Reach Plot',
        series: {
          0: { targetAxisIndex: 0 },
          1: { targetAxisIndex: 1, type: 'line' },
        },
        vAxes: {
          // Adds titles to each axis.
          0: { title: vAxisTitle },
          1: { title: vAxisSecondTitle },
        },
        chartArea: {
          // leave room for y-axis labels
          width: '70%',
        },
        colors: barColors,
        width: '99%',
        hAxis: { title: hAxisTitle, gridlines: { count: 4 } },
        backgroundColor: '#fff',
        seriesType: 'bars',
        legend: {
          position: 'top',
          alignment: '',
        },
      }}
      rootProps={{ 'data-testid': '1' }}
    />
  );
}

我正在努力调整宽度，如下所示：

chartArea: {
          // leave room for y-axis labels
          width: '70%',
        }

当我将图表区域宽度设置70%为时，它允许我查看 ylabels，如下所示： 但它会切断 x 轴标签，因为您可以看到它们折叠为...s。而当我将宽度提高到 90% 时，它会覆盖 x 轴标签，但会折叠我的 y 轴标签：

chartArea: {
          // leave room for y-axis labels
          width: '90%',
        }

如何创建涵盖两种情况的最佳情况？

标签： react-google-charts