Bar Chart Component

CeoSales.vue

<template>
    <div>
        <div class="chart-container"
             style="position: relative; height:60%; width:75%; margin: auto;">
            <canvas ref="canvas"></canvas>
        </div>
    </div>
</template>

<script type="text/babel">
    import Chart from 'chart.js';

    export default {
        data() {
            return {};
        },
        components: {},
        created() {},
        props: [],
        computed: {
            csd() {
                return this.$store.state.ceo_sales.vals;
            },
            csl() {
                return this.$store.state.ceo_sales.labels;
            }
        },
        methods: {
            startPie: function(canvas, type){
                let chart = new Chart(canvas, {
                    type: type,
                    data: {
                        labels: this.csl,
                        datasets: [
                            {
                                data: this.csd,
                                backgroundColor: [
                                    "#e25039",
                                    "#27a86e",
                                    "#f39c12",
                                    "#00c0ef",
                                    "#428dbc"
                                ],
                                hoverBackgroundColor: [
                                    "#FF6384",
                                    "#36A2EB",
                                    "#FFCE56"
                                ]
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        animation:{
                            animateScale:true
                        },
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    fontColor: "white",
                                    fontSize: 10,
                                    stepSize: 100000
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    fontColor: "white",
                                    fontSize: 10
                                }
                            }]
                        }
                    }
                })
            }
        },
        mounted() {
            this.startPie(this.$refs.canvas, 'bar');
        }
    }
</script>

<style scoped></style>