Отзывчивый график растет неуправляемо

Question

У меня есть компонент vue, который реализует компонент vue -chart js HorizontalBar, который я отображаю как ячейку в таблице bootstrap - vue. Мое желание состоит в том, чтобы диаграмма сохраняла фиксированную высоту, но масштабировалась горизонтально по мере того, как окно увеличивалось / уменьшалось.

Диаграмма воспроизводится достаточно хорошо при первой загрузке страницы, но неуправляемо увеличивается при изменении размера, чтобы охватить другие элементы на страницы.

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

Вот мой соответствующий код компонента:

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() {
    this.chartData = {
      datasets: [
        // some data
      ]
    };
    this.renderChart(this.chartData, this.options);
  }
};
</script>

И как я использую это внутри кода моей таблицы:

      <template v-slot:cell(graph)="data">
        <response-graph
          :correct="data.item.correct"
          :incorrect="data.item.incorrect"
          :omitted="data.item.omitted"
          :height="20"
        />
      </template>