Vue.component('pie-chart', {
    extends: VueChartJs.Pie,
    props:['data','labels','infolabel','infocollor'],
    data() {
        return {
            gradient: null,
            gradient2: null,
            datasets: [],
            options:{responsive: true, maintainAspectRatio: false}
        };
    },
    computed:{},
    methods:{
        setData(){
            this.datasets.push( {
                label: this.infolabel,
                backgroundColor: this.infocollor,
                pointBackgroundColor: "white",
                borderWidth: 1,
                pointBorderColor: "white",
                pointHoverBackgroundColor: "white",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data:this.data
            })
        },
        runChart(){
            this.setData()
            this.renderChart(
                {
                    labels: this.labels,
                    datasets: this.datasets
                },
                this.options
            )
        }

    },
    mounted() {
        this.runChart()
    }
});