Vue-chartjs: How to create mixed chart types

[willbrowningme]

Expected Behaviour

In the chart js documentation http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types there is a section regarding created mixed charts, for example a line chart with bar overlay.

I tried doing the following:

import Chart from 'vue-chartjs';

export default Chart.Line.extend({
    data: function () {
        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)
    }
})

Actual Behaviour

However this shows the chart but without the bar overlay, I believe it may have something to do with the fact the above is extending Chart.Line and not Chart.Bar.

How can I get multiple charts to work correctly?

Environment

• OS: Windows 10
• NPM Version: 3.10.8

[apertureless]

From the chartjs docs:

When creating the chart you must set the overall type as bar.

So, try to use Chart.Bar.extend()

[willbrowningme]

Works perfectly now, can't believe I overlooked that. Thanks