CeoSales.vue

<template>
    <div>
        <div class="chart-container" ref="chartContainer">
            <canvas ref="canvas"></canvas>
        </div>
    </div>
</template>

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

    export default {
        data() {
            return {};
        },
        components: {},
        created() {},
        props: ['ceo_sales'],
        watch: {
            ceo_sales(newVal, oldVal) {
                this.startBar(this.$refs.canvas, 'bar');
            }
        },
        computed: {
            csd() {
                if(this.ceo_sales) {
                    return [
                        this.ceo_sales.gross,
                        this.ceo_sales.net,
                        this.ceo_sales.gp,
                        this.ceo_sales.book
                    ];
                } else {
                    return [0, 0, 0, 0];
                } // end if
            }
        },
        methods: {
            startBar: function(canvas, type){
                let chart = new Chart(canvas, {
                    type: type,
                    data: {
                        labels: ['Gross', 'Net', 'GP', 'Book'],
                        datasets: [
                            {
                                data: this.csd,
                                backgroundColor: [
                                    "#e25039",
                                    "#27a86e",
                                    "#f39c12",
                                    "#36A2EB"
                                ]
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    color: "#989898"
                                },
                                ticks: {
                                    fontColor: "white",
                                    fontSize: 10,
                                    stepSize: 200000,
                                    callback: function(value) {
                                        var ranges = [
                                            { divider: 1e6, suffix: 'M' },
                                            { divider: 1e3, suffix: 'k' }
                                        ];
                                        function formatNumber(n) {
                                            for (var i = 0; i < ranges.length; i++) {
                                                if (n >= ranges[i].divider) {
                                                    return (n / ranges[i].divider).toString() + ranges[i].suffix;
                                                }
                                            }
                                            return n;
                                        }
                                        return '$' + formatNumber(value);
                                    }
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display: false
                                },
                                ticks: {
                                    fontColor: "white",
                                    fontSize: 10
                                }
                            }]
                        },
                        animation: {
                            animateScale:true
                        }
                    }
                })
            }
        },
        mounted() {}
    }
</script>

<style scoped>
    .chart-container {
        position: relative;
        height:90%;
        width:90%;
        margin: auto;
    }
</style>