CODEWITHSUNDEEP
vue.jsvue-chartjs
TheDevGuy
TheDevGuy

Reputation: 703

Resize a chart with vue

I want to know how can I give a size to a chart.

I using vue-chartjs and I don't see any option to do this.

I just have this code in chart componenent

<script>
    import { Line, mixins } from 'vue-chartjs'
    const { reactiveProp } = mixins;

    export default {
        name: 'line_chart',
        extends: Line,
        mixins: [reactiveProp],
        props: ['options'],
        mounted () {
            this.renderChart(this.chartData, this.options);
        }
    }
</script>

and this code in the render component script

            fillData () {
                this.data_collection = {
                    labels: [0, 25, 50, 100],
                    datasets: [
                        {
                            label: 'Blue',
                            backgroundColor: '#147aff',
                            fill: false ,
                            borderColor: '#147aff',
                            data: [0, 50, 100, 0],
                        },
                    ]
                };
                this.chart_options = {
                    responsive: true,
                }
            },

Upvotes: 4

Views: 1587

Answers (1)

Hamilton Gabriel
Hamilton Gabriel

Reputation: 367

in the following way:

<elemento :styles="myStyles"></elemento>
<script>
export default: {
computed: {
    myStyles () {
        return {height: '99px'}
    }
  }
}
</script>

Example: https://jsfiddle.net/hamiltongabriel/7s40paog/6/

Upvotes: 1

Related Questions