Mix Line and Bar

Default

<canvas id="mix" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar target="mix"></chartjs-bar>
<canvas id="mix" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar target="mix"></chartjs-bar>

Set Option Pros

<canvas id="mix2" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar target="mix2" :labels="['A', 'B', 'C', 'D']" :beginzero="false"></chartjs-bar>
<canvas id="mix2" count="2"></canvas>
<chartjs-line target="mix2"></chartjs-line>
<chartjs-bar target="mix2" :labels="mylabels" :beginzero="myboolean"></chartjs-bar>
<script>
Vue.use(VueCharts);
const app = new Vue({
    el: '#app',
    data:{
        myboolean: false,
        mylabels : ['A', 'B', 'C', 'D'],
    },
});
</script>

Set Data Pros

<canvas id="mix3" count="2"></canvas>
<chartjs-line target="mix3" :data="[70, 40, 55, 80, 55]"></chartjs-line>
<chartjs-bar target="mix3" :data="[20, 30, 20, 10, 5]" :labels="['A', 'B', 'C', 'D', 'E']"></chartjs-bar>
<canvas id="mix3" count="2"></canvas>
<chartjs-line target="mix3" :data="first_data"></chartjs-line>
<chartjs-bar target="mix3" :data="second_data" :labels="mylabels"></chartjs-bar>
<script>
Vue.use(VueCharts);
const app = new Vue({
    el: '#app',
    data:{
        first_data : [70, 40, 55, 80, 55],
        second_data : [20, 30, 20, 10, 5],
        mylabels : ['A', 'B', 'C', 'D', 'E'],
    },
});
</script>

More Example

<canvas id="mix4" count="4"></canvas>
<chartjs-line target="mix4" :data="[70, 40, 60, 80, 50]" bordercolor="rgba(0,0,0,0.05)" backgroundcolor="rgba(0,0,0,0.05)" :fill="true"></chartjs-line>
<chartjs-bar target="mix4" :data="[20, 30, 20, 10, 5]" backgroundcolor="#b2dfdb"></chartjs-bar>
<chartjs-bar target="mix4" :data="[20, 20, 40, 15, 60]" backgroundcolor="#333333"></chartjs-bar>
<chartjs-bar target="mix4" :data="[50, 10, 60, 55, 35]" :labels="['A', 'B', 'C', 'D', 'E']" backgroundcolor="#bbdefb"></chartjs-bar>