I've exhausted all options, but I can't seem to make the height of my chart respond effectively.
The width is behaving as expected, adjusting responsively, but the height stubbornly remains fixed at 400px.
Within my primary Vue application, I invoke my component (passing in the chart data):
<ProjectedCumulativeSavings :datacollection="projectData.projectedCumulativeSavings" />The code for the ProjectedCumulativeSavings.vue component is as follows:
<template>
<div class="chart-container" >
<bar-chart
:chart-data="datacollection"
:options="options"
chart-id="projectedCumulativeSavings"
/>
</div>
</template>
<script>
import BarChart from '../mixins/BarChart.js'
export default {
components: {
BarChart
},
props: {
datacollection: ''
},
data() {
return {
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: 'Projected Cumulative Savings',
fontSize: 18
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return 'R' + value.toLocaleString('en')
}
}
}]
}
}
}
},
created() {
},
computed: {
}
}
</script>
<style >
.chart-container {
min-width: 375px;
max-width: 1024px;
/* margin: 30px; */
position: relative;
width: 100%;
height: 40vw;
}
</style>
The code for BarChart.js is as follows:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted() {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
},
watch: {
chartData() {
this.$data._chart.update()
}
}
}