Combination of Bar and Line Chart

[alokpandeyrc]

Is it possible to achieve combination of Bar and Line chart ?

Environment

• vue.js version: <2.0>
• vue-chart.js version:
• npm version:

[apertureless]

Sure! Check out the docs for that: http://www.chartjs.org/docs/latest/charts/mixed.html

You only need to create chart from the bar basechart

import {Bar} from 'vue-chartjs'

export default Bar.extend({....})

And in your dataset array you can change specific datasets to line.

[alokpandeyrc]

Thanx @apertureless....it worked...

[riksnelders]

Doesnt seem to work for me..

WEBPACK_IMPORTED_MODULE_0_vue_chartjs_.a.extend is not a function

import {Bar} from 'vue-chartjs'

    export default Bar.extend({
 
        data(){
            return {
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            }
        },
        mounted () {
            this.renderChart({
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        type: 'bar',
                        label: 'Bar Component',
                        data: [10, 20, 30],
                    },
                    {
                        type: 'line',
                        label: 'Line Component',
                        data: [30, 20, 10],
                    }
                ]
            }, this.options)
        }
    })

EDIT:
Should be:

 export default {....

Working now

[apertureless]

Yeah with v3 the syntax for chart creation has changed.

[mkstix6]

Could anyone post a full example of a mixed Bar and Line chart with separate axes here for v3? I'm struggling with this a little. I have managed to get lines to appear but not a bar at the same time.
Wait, never mind. Axes type: 'linear' was the cause of my bar chart not rendering:

// Don't do this if you want a bar chart.
 xAxes: [
    {
        type: 'linear'
    }
],