var options = {
    chart: {
        type: 'line',
        toolbar: {
            show: false,
        },
    },
    colors: ['var(--chart-color1)', 'var(--chart-color5)'],
    series: [{
        name: 'Website Blog',
        type: 'column',
        data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
    }, {
        name: 'Social Media',
        type: 'line',
        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
    }],
    stroke: {
        width: [0, 4]
    },
    labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
    xaxis: {
        type: 'datetime'
    },
    yaxis: [{
        title: {
            text: 'Website Blog',
        },
    },{
        opposite: true,
        title: {
            text: 'Social Media'
        }
    }]
}
var chart = new ApexCharts( document.querySelector("#apex-chart-line-column"), options );
chart.render();

function generateData(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
        var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
        var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;

        series.push([x, y, z]);
        baseval += 86400000;
        i++;
    }
    return series;
}
var options = {
    chart: {
        type: 'bubble',
        toolbar: {
            show: false,
        },
    },
    colors: ['var(--chart-color1)', 'var(--chart-color5)'],
    dataLabels: {
        enabled: false
    },
    series: [{
        name: 'Bubble1',
        data: generateData(new Date('11 Feb 2019 GMT').getTime(), 20, { min: 10, max: 60 })
    },{
        name: 'Bubble2',
        data: generateData(new Date('11 Feb 2019 GMT').getTime(), 20, { min: 10, max: 60 })
    }],
    fill: {
        opacity: 0.8
    },
    title: {
        text: 'Simple Bubble Chart'
    },
    xaxis: {
        tickAmount: 12,
        type: 'category',
    },
    yaxis: {
        max: 70
    }
}

var chart = new ApexCharts(document.querySelector("#apex-simple-bubble"),options);
chart.render();