ll

    import { HorizontalBar } from 'vue-chartjs'

    export default {
        name: 'diagram',
        extends: HorizontalBar,
        data: () => ({
            chartData: '',
            score: {},
            value: [],
            keys: [],

            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        },
                    }]
                },
            },
                        /*gridLines: {
                            display: false
                        }
                    }],
                    gridLines: {
                        display: true
                    }
                },

                         legend: {
                             display: false
                         },
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, this.keys) {
                        return '$' + tooltipItems.yLabel;
                    }
                }
            },
    */
                responsive: true,
                maintainAspectRatio: false

        }),
            created () {

                // Overwriting base render method with actual data.
                this.$http({
                    method: 'get',
                    url: this.base_url + '/exam/api/' + 'score/' + this.$store.state.user.id + '/',

                    auth: {
                        username: 'l360_mobile_app',
                        password: 'itsd321#'
                    },
                }).then(res => {

                    console.log(res);
                    if (res.status == '200') {
                        console.log(res.data);
                        this.score = res.data;
                        for (let v  in  this.score) {
                            this.value.push(this.score[v]);
                        }
                        for (let key  in  this.score) {
                            this.keys.push(key);
                        }


                        console.log(this.keys);
                        console.log(this.value);
                    }
                });
                this.fillData()

            },
            mounted(){
            this.renderChart(this.chartData, this.options);


        },

        methods: {

            fillData ()  {
                this.chartData = {

                labels: this.keys,

                datasets: [
                    {
                        label: "Label One",
                        backgroundColor: '#f87979',
                        data: this.value,

                    }

                ],

            }
        }
        },
        watch: {
            data: function () {
                this._chart.destroy();
                this.renderChart(this.chartData, this.options);
            },
        },


    }