height changed unexpectedly after re-rendering

[giantwhale]

I set width and height both to 300 and I am refresing my chart every 10 seconds. At first the charts are properly sized, however, after the first refresh, the chart size changes. I tried many different combinations by setting responsive and maintainAspectRatio, but in some cases width changes from 300->700 after refreshing, and in other cases height changes from 300->700

My Code:

In the template I have:

        <section v-for='dataitem in lineChartData'>
            <div class='mainchart'>
                <LineChart :width="800" :height="300" 
                           :chartData="dataitem" :chartOption="chartopt"></LineChart>
            </div>
        </section>

And the javascript is :

const $ = require('jquery');
import LineChart from "./line_chart";

export default {
  name: 'app'
  , data () {
        return { 
        , 'lineChartData': []
        , 'chartopt': {
            responsive: false, 
            maintainAspectRatio: false,
            elements: { 
                point: { radius: 0 } 
            }, 
            scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 26
                    }
                }]
            }
        }
        , 'interval10': null
        }
    }
    , components: {
        LineChart
    }
    , methods: {
        load_data() {
            var self = this;
            $.getJSON("http://localhost:8001/data", function(json) {
                let data = $.extend({}, json);
                self.lineChartData = data.Accounts;  // i am only assigning a member to lineChartData, which is a list of datasets, label pairs.
            });
        }

    }
    , mounted() {
        var self = this;

        this.load_data(); 
        
        this.interval10 = setInterval(() => {
            this.load_data();
        }, 10000)
    }
    ,  beforeDestroy: function(){
        clearInterval(this.interval10);
    }
}

Then the actual chart component js:

import VueChartJs from 'vue-chartjs';
import { Line } from 'vue-chartjs';

export default Line.extend({
      props: ['chartOption']
    , mixins: [VueChartJs.mixins.reactiveProp]
    , mounted () {
        this.renderChart(this.chartData, this.chartOption)
    }
})

[apertureless]

Try naming your options prop options and not chartOption .
Because the reactive mixin will call a re-render if nessasary and is calling this.renderChart(this.chartData, this.options)

And please provide a minimal codepen for reproduction.

[apertureless]

closed due to inactivity