4

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

OLA
  • 861
  • 2
  • 11
  • 23
  • [This right here](https://vue-chartjs.org/guide/#updating-charts) is what you need to implement to support this. – Ohgodwhy Sep 07 '19 at 01:37
  • How do I use that in the browser? That seems to be geared to SFC. Any ideas? – OLA Sep 07 '19 at 02:39

0 Answers0