Bar

Init Vue Instance


    <body>...</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
    <script src="js/vue-charts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>
        Vue.use(VueCharts);
        const app = new Vue({
            el: '#app'
        });
    </script>
    

Basic Usage

Defaul Bar

<chartjs-bar></chartjs-bar>
<chartjs-bar></chartjs-bar>

Set Scales Display

<chartjs-bar :scalesdisplay="false"></chartjs-bar>
<chartjs-bar :scalesdisplay="myboolean"></chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : false,
        },
    });
</script>

Set Hight and Width

<chartjs-bar :width="300" :height="500"></chartjs-bar>
<chartjs-bar :width="mywidth" :height="myheight"></chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mywidth : 300,
            myheight : 500,
        },
    });
</script>

Set Begin At Zero

<chartjs-bar :beginzero="false"></chartjs-bar>
<chartjs-bar :beginzero="myboolean"></chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : false,
        },
    });
</script>

Set Labels and Data

<chartjs-bar :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-bar>
<chartjs-bar :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabel : 'TestDataLabel',
            mylabels : ['happy', 'myhappy', 'hello'],
            mydata : [100, 40, 60]
        },
    });
</script>

Set Color

<chartjs-bar
        :beginzero="true"
        :backgroundcolor="['rgba(75,0,192,0.1)','rgba(0,88,88,0.1)','rgba(75,192,0,0.1)','rgba(75,192,192,0.1)']"
        :bordercolor="['rgba(75,192,192,1)','rgba(0,192,192,1)','rgba(75,192,0,0.1)','rgba(75,192,192,1)']">
    </chartjs-bar>
<chartjs-bar
        :beginzero="myboolean"
        :backgroundcolor="mybackgroundcolor"
        :bordercolor="mybordercolor">
    </chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : true,
            mybackgroundcolor : ['rgba(75,0,192,0.1)','rgba(0,88,88,0.1)','rgba(75,192,0,0.1)','rgba(75,192,192,0.1)'],
            mybordercolor : ['rgba(75,192,192,1)','rgba(0,192,192,1)','rgba(75,192,0,0.1)','rgba(75,192,192,1)']
        },
    });
</script>

Horizontal Bar

Default Horizontal Bar

<chartjs-horizontal-bar></chartjs-horizontal-bar>
<chartjs-horizontal-bar></chartjs-horizontal-bar>

Horizontal Bar Props

<chartjs-horizontal-bar :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-horizontal-bar>
<chartjs-horizontal-bar :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-horizontal-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabel : 'TestDataLabel',
            mylabels : ['happy', 'myhappy', 'hello'],
            mydata : [100, 40, 60]
        },
    });
</script>

Multiple Bar

Bar on Target Canvas

<canvas id="mycanvas" count="3"></canvas>
<chartjs-bar target="mycanvas"></chartjs-bar>
<chartjs-bar target="mycanvas"></chartjs-bar>
<chartjs-bar target="mycanvas"></chartjs-bar>
<canvas id="mycanvas" count="3"></canvas>
<chartjs-bar target="mycanvas"></chartjs-bar>
<chartjs-bar target="mycanvas"></chartjs-bar>
<chartjs-bar target="mycanvas"></chartjs-bar>

Different Color

<canvas id="mycanvas2" count="2"></canvas>
<chartjs-bar target="mycanvas2" :backgroundcolor="'#383838'"></chartjs-bar>
<chartjs-bar target="mycanvas2"></chartjs-bar>
<canvas id="mycanvas2" count="2"></canvas>
<chartjs-bar target="mycanvas2" :backgroundcolor="mybackgroundcolor"></chartjs-bar>
<chartjs-bar target="mycanvas2"></chartjs-bar>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mybackgroundcolor='#383838'
        },
    });
</script>

Override

Override Datasets

<chartjs-bar :labels="mylabels" :datasets="mydatasets"></chartjs-bar>
<script>
const app = new Vue({
    el: '#app',
    data:{
        mylabels: ["January", "February", "March", "April", "May", "June", "July"],
        mydatasets:[{
            label: "My First dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        },
        {
            label: "My Second dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [20, 50, 20, 41, 26, 85, 20],
        }],
    },
});
</script>

Override Option

<chartjs-bar :option="myoption"></chartjs-bar>
<script>
const app = new Vue({
    el: '#app',
    data:{
        myoption:{
            responsive:true,
            maintainAspectRatio:true,
            title: {
                display: true,
                position: 'bottom',
                text: 'Custom Chart Title'
            },
            scales: {
                yAxes: [{
                    stacked: true
                }]
            }
        }
    }
});
</script>