I am using Vue-chartjs and created two vue components, one each for a bar and line chart. My data source is SharePoint. I am able to see my charts but the problem I have is the charts are not responsive. They are enlarged and sit on top of each other.
I am passing props from the parent to each component including options but it's to no avail.
Here's an excerpt of my vue instance code and my bar chart component
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
ChartConfig: {
labels: [],
datasets: [
{
data: [],
backgroundColor: '#3498db',
borderColor: 'rgba(136,136,136,0.5)',
label: "2013"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
categoryPercentage: 0.5,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
},
bar chart component
Vue.component('my-bar-chart', {
extends: VueChartJs.Bar,
props: ['barData', 'chartOptions'],
mounted: function () {
this.renderChart(this.barData, this.chartOptions);
}
})
html
<my-bar-chart :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>
I was able to duplicate the issue in this pen