<!--:Chart HTML:-->
<div id="chart_line"></div>

<!--:Dashboard scripts:-->
<script src="vendor/js/apexcharts.min.js"></script>
<script>
    var options = {
        colors: ['var(--color-primary)', 'var(--color-orange-400)', 'var(--color-blue-300)'],
        series: [{
            name: "Organic",
            data: [5120, 4800, 5330, 4990, 5450, 5100, 5580, 4950, 5700]
        },
        {
            name: "Referral",
            data: [3620, 3750, 3400, 3900, 3580, 4000, 3700, 3880, 3550]
        },
        {
            name: "Ads",
            data: [3200, 4100, 3300, 4450, 3700, 4290, 3600, 4700, 3400]
        }
        ],
        chart: {
            height: 320,
            type: 'line',
            fontFamily: "inherit",
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 2,
            dashArray: [0, 0, 6]
        },
        grid: {
            strokeDashArray: 4,

        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        tooltip: {
            y: {
                formatter: function (value) {
                    return "$" + value;
                }
            }
        }
    };
    var chart = new ApexCharts(document.querySelector("#chart_line"), options);
    chart.render();
</script>

<!--:Chart HTML:-->
<div id="chart_bar"></div>

<!--:Apex Bar Chart:-->
<script src="vendor/js/apexcharts.min.js"></script>
<script>
    var options = {
        colors: ['var(--color-primary)', 'var(--color-orange-500)', 'var(--color-blue-300)'],
        series: [{
            name: "Organic",
            data: [5120, 4800, 5330, 4990, 5450, 5100, 5580, 4950, 5700]
        },
        {
            name: "Referral",
            data: [3620, 3750, 3400, 3900, 3580, 4000, 3700, 3880, 3550]
        },
        {
            name: "Direct",
            data: [3200, 4100, 3300, 4450, 3700, 4290, 3600, 4700, 3400]
        }
        ],
        chart: {
            height: 290,
            type: 'bar',
            fontFamily: "inherit",
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },

        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        dataLabels: {
            enabled: false
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                borderRadius: 2,
                borderRadiusApplication: 'end'
            }
        },
        grid: {
            strokeDashArray: 4,

        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        legend: {
            show: false
        }
    };
    var chart = new ApexCharts(document.querySelector("#chart_bar"), options);
    chart.render();
</script>

<!--:Chart HTML:-->
<div id="chart_bar"></div>

<!--:Apex Mixed Chart script:-->
<script src="vendor/js/apexcharts.min.js"></script>
<script>
    var optionsMixed = {
        colors: ['var(--color-primary)', 'var(--color-cyan-300)', 'var(--color-blue-500)'],
        series: [{
            name: 'TEAM A',
            type: 'column',
            data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
        }, {
            name: 'TEAM B',
            type: 'area',
            data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
        }, {
            name: 'TEAM C',
            type: 'line',
            data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
        }],
        chart: {
            height: 350,
            type: 'line',
            stacked: false,
            fontFamily: "inherit",
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },
        },
        stroke: {
            width: [0, 3, 3],
            curve: 'smooth'
        },
        plotOptions: {
            bar: {
                columnWidth: '50%'
            }
        },
        fill: {
            opacity: [0.85, 0.25, 1],
            gradient: {
                inverseColors: false,
                shade: 'light',
                type: "vertical",
                opacityFrom: 0.85,
                opacityTo: 0.55,
                stops: [0, 100, 100, 100]
            }
        },
        markers: {
            size: 0
        },
        grid: {
            strokeDashArray: 4,

        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function (y) {
                    if (typeof y !== "undefined") {
                        return y.toFixed(0) + " points";
                    }
                    return y;

                }
            }
        }
    };
    var chartMixed = new ApexCharts(document.querySelector("#chart_mixed"), optionsMixed);
    chartMixed.render();
</script>

<!--:Chart HTML:-->
<div id="chart_donut"></div>

<!--:Apex Donut Chart script:-->
<script src="vendor/js/apexcharts.min.js"></script>
<script>
    var optionsDonut = {
        series: [45, 35, 20],
        labels: ['Desktop', 'Tablet', 'Mobile'],
        colors: ['var(--color-primary)', 'var(--color-orange-500)', 'var(--color-blue-500)'],
        chart: {
            type: 'donut',
            fontFamily: 'inherit',
            width: '250'
        },
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: false,
            width: 0
        },
    };

    var chartDonut = new ApexCharts(document.querySelector("#chart_donut"), optionsDonut);
    chartDonut.render();
</script>