Как решить задачу ширины диаграммы js -2 в React

Question

У меня в реакции есть диаграмма js гистограмма. Две проблемы.

1. Как уменьшить интервал в xAxis
2. Когда страница моего приложения обновляется, диаграмма вынуждает основное содержимое растягиваться (по горизонтали) так далеко, что я не хочу. Эта проблема решается путем перехода к другому разделу на боковой панели, а затем, когда я возвращаюсь к компоненту диаграммы, размер диаграммы изменяется до соответствующего размера. Я хочу, чтобы он просто заполнял мою страницу соответствующим образом каждый раз при обновлении страницы.

Мой код

<Bar
  data={this.state.chartData}
  options={{
    scales: {
      xAxes: [{ 
        barPercentage: 0.3
        }],
    },
    title: {
      display: this.props.displayTitle,
      text: "Largest Cities In " + this.props.location,
      fontSize: 25,
    },
    legend: {
      display: this.props.displayLegend,
      position: this.props.legendPosition,
    },
  }}
/>

Изображение, когда страница загружается / обновляется

Appropriate Image size after revisiting the chart page введите описание изображения здесь