<div class="combined-chart"></div>

/*
 * File: combined-chart-v1.js
 * Location /src/js/components
 * Combined chart v1 component
 */

(function() {
    new Chart({
        element: '.combined-chart',
        legend: true,
        chartOptions: {
            smooth: true,
            line: {
                showAnchorPoints: true
            },
            column: {
                stack: false,
                width: '60%',
                radius: 4,
                gap: 2
            }
        },
        datapoints: [{
                type: 'column',
                name: 'Japan',
                data: [1, 25, 3, 90, 30, 90, 120, 50, 21, 3, 18, 2]
            },
            {
                type: 'line',
                name: 'Germany',
                data: [0, 130, 40, 120, 50, 130, 90, 30, 90, 110, 21, 3]
            },
            {
                type: 'column',
                name: 'Spain',
                data: [50, 95, 30, 9, 30, 10, 130, 50, 2, 3, 25, 9]
            },
            {
                type: 'line',
                name: 'Costa rica',
                data: [50, 10, 0, 50, 25, 0, 130, 50, 41, 3, 28, 9]
            },
        ],
        xAxis: {
            title: 'Month',
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labelModifier: function(value) {
                return 'Month ' + value;
            }
        },
        yAxis: {
            title: 'Total'
        },
        tooltip: {
            enabled: true
        }
    });
})();