Responsive Width, Fixed Height

Expected Behavior

I would like to render a chart width a 100% width, but a fixed height (e.g. 500px). I would also like the chart to resize according to those constraints (without maintaining aspect ratio).

Actual Behavior

Currently, I’m having trouble working with the responsive/maintainAspectRatio options. Regardless of my styling & options, the height seems to grow beyond it’s containing elements (I believe it’s using a 1:1 aspect ratio).

I can easily get something working when I feed the chart numeric width/height as a landscape ratio w:h (e.g. <line-chart :chart-data="chartData" :width="5" :height="1" />). Since the prop validation expects a number, I’m wondering if my desired behavior is possible with the current api.

Environment

• vue.js version: 2.4.2
• vue-chart.js version: 2.8.2
• npm version: 5.3.0

[alexsasharegan]

Fixed

Switching my component definition to the following solved my problem. This makes me think that somewhere in the chain, my maintainAspectRatio setting was getting merged with the default true in a way that merged the truthy value. Maybe, maybe not. But this works nicely now, so feel free to close this or keep it open for @wannymiarelli .

<script>
import { Line, mixins } from "vue-chartjs"
import { plainObj } from "@/core/object"

export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: {
    options: {
      type: Object,
      default: plainObj
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  },
  data() {
    return {
      defaultOptions: {
        responsive: true, // my new default options
        maintainAspectRatio: false, // my new default options
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            },
            gridLines: {
              display: true // my new default options
            }
          }],
          xAxes: [{
            gridLines: {
              display: false
            }
          }]
        }
      },
      plugins: []
    }
  },
})
</script>

[apertureless]

Do you have maintainAspectRatio set to true or false?

Can you maybe post a minimal codepen for reproduction?