I have a chart component, and my job is to make a button to change it's type (eg. columns to pie), but i don't know how to change it on a button click event. Here's the structure of the component (the idea is to change the :series-defaults-type when the button with ChangeType id is pressed)

<template>
    <div style="width: 100%;overflow: overlay;border-radius: 20px;">
        <button id="changeType" @click="changeType()">Change</button>
        <chart-more-option :kpiName="'EquipmentRetirementForecast'" v-if="showMoreOptions"/>
       <chart :title-text="'Equipment Retirement Forecast'"
              :title-color="'#FFF'"
              :title-font="'openSans'"
              :chart-area-background="'#1B1534'"
              :legend-visible="false"
              :series-defaults-type= "'column'"
              :series="series"
              :category-axis="categoryAxis"
              :axis-defaults-color="'#FFF'"
              :axis-defaults-labels-rotation-angle="'30'"
              :value-axis="valueAxis"
              :tooltip="tooltip"
              :theme="'sass'"
              :zoomable-mousewheel="true">
        </chart>
    </div>
</template>

<script>
import { Chart } from '@progress/kendo-charts-vue-wrapper';
import ChartMoreOption from '../ChartMoreOption';

export default {
    name: 'EquipmentRetirementForecast',
    components: {
        'chart': Chart,
        ChartMoreOption
        
    },
    props:  {
        fetchData: {
            type: Boolean,
            default: false
        },
        showMoreOptions: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
      labelAlign(){
        var c = this.$refs.chart
        c.updateWidget();
      }
    },
    computed:{
        requestBody(){
            return this.$store.getters['usersession/getTopologyRequestBody']
        },
        series(){            
            return this.$store.getters['riskmanagement/getRetirementForecastSeries']
        },
        categoryAxis(){            
            return this.$store.getters['riskmanagement/getRetirementForecastCategoryAxis']
        },
    },
    data: function() {
        return {
            valueAxis: [{
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],

            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #",
            },

        }
    },
    mounted(){   
        if(this.fetchData){     
            this.$store.dispatch("riskmanagement/FetchRetirementForecastData",this.requestBody).then(()=>{

            });
        }
    },
    methods: {
        changeType(){
            //code goes here
        }
    }
}
</script>
<style src="../style-dashboard.scss" lang="scss" scoped />

This is the chart i need to change:

Changing the :series-defaults-type to pie by hand, it works, but i need to make that change in a button click, as follows:

CodePudding user response：

Add a data property and give it the default of 'column', name it for example chartType. Then inside the changeType() you add this.chartType = 'pie'. And change :series-defaults-type= "'column'" to :series-defaults-type= "chartType".

Also remember to NOT use : for attribute values that are hardcoded. So :chart-area-background="'#1B1534'" should be chart-area-background="#1B1534".