5

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

2
  • This right here is what you need to implement to support this.
    – Ohgodwhy
    Commented Sep 7, 2019 at 1:37
  • How do I use that in the browser? That seems to be geared to SFC. Any ideas?
    – OLA
    Commented Sep 7, 2019 at 2:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.