Vue.component('horizontalbar-chart', {
    extends: VueChartJs.HorizontalBar,
    props:['data','labels','infolabel','infocollor'],
    data(){
        return {
            options:{ responsive: true, maintainAspectRatio: false },
            datasets:[]
        }
    },
    computed:{},
    methods:{
        setData(){
            var that=this
            for (const key in this.data) {
                const d=that.data[key]
                const l=that.infolabel[key]
                const c=that.infocollor[key]
                this.datasets.push({ 
                    label: l,
                    borderColor:c ,
                    pointBackgroundColor: "white",
                    borderWidth: 1,
                    pointBorderColor: "white",
                    backgroundColor: c,
                    data:d
                })
            }

        },
        runChart(){
            this.setData()
            this.renderChart(
                {
                    labels: this.labels,
                    datasets: this.datasets
                },
                this.options
            )
        }

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