Responsive chart growing uncontrollably

I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks.

The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page.

How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up the extent of the table cell they're in, rather than weirdly stopping a few pixels short.

Here's my relevant component code:

<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>

And how I'm using it inside of my table code:

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

Answers (1)

AnswerDeveloper

Jan 04

To make the charts responsive, you could set the responsive and maintainAspectRatio options in the chart configuration to true and set a fixed height for the chart element using CSS. This will ensure that the chart maintains its aspect ratio when the window is resized.

To make the chart fill the entire table cell, you can set the chart element to have a 100% width and height. You can do this by adding the following CSS to your chart component:


.vue-chart {
  width: 100%;
  height: 100%;
}

You may also need to set the table cell to have a fixed height and width to ensure that the chart element fills the entire cell.


td {
  width: 50px;
  height: 50px;
}