##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Chart

1. Home
3. Components
5. Chart

##### Line Chart

    <!--: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 Bar

    <!--: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 Mixed

    <!--: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 Donut

    <!--: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>