[Chartjs]-VueJs and ChartJs – Chart is responsive in width, but not height?

by

1👍

The only thing that has worked for me is setting the height and width on the component as such:

<BarChart
   :chart-data="chart2Data"
   :options="chart2Options"
   :key="chart2Trigger"
   :height="2"
   :width="4"
 />

0👍

I got same problem and found this.

https://www.chartjs.org/docs/latest/general/responsive.html#important-note

Try this

    <bar-chart
        :chart-data="datacollection"
        :options="options"
        :styles="myStyles"  <-- add this
        chart-id="projectedCumulativeSavings"
    />

And

    computed: {
        myStyles() {
          return {
            height: '20vh',   <-- this makes your chart responsive
            position: 'relative',
          };
    },

Leave a comment