<script type="text/javascript"> (
    function (global) {
        "use strict";
        Apex.colors = [
            theme.color.primary,
            theme.color.success,
            theme.color.info,
            theme.color.warning,
            theme.color.danger
        ];
        var init = function () {
            // sparkline
            window.Apex = {
                stroke: {
                    width: 2
                },
                markers: {
                    size: 0
                },
                tooltip: {
                    fixed: {
                        enabled: true,

                    }
                }
            };

            var opts = {
                annotations: {
                    yaxis: [
                        {
                            y: 260,
                            borderColor: '#00E396',
                            label: {
                                borderColor: '#00E396',
                                style: {
                                    color: '#fff',
                                    background: '#00E396',

                                },
                                text: 'Support',

                            }
                        }
                    ]
                },
                chart: {
                    type: 'area',
                    stacked: false,
                    height: 350,
                    zoom: {
                        type: 'x',
                        enabled: true,
                        autoScaleYaxis: true
                    },
                    toolbar: {
                        autoSelected: 'zoom'
                    }
                },
                dataLabels: {
                    enabled: false
                },
                series: [
                    {
                        name: 'XYZ MOTORS',
                        data: [
                            {
                                x: "2019-10-28T16:00:58.045487+00:00",
                                y: 664
                            },
                            {
                                x: "2019-10-28T16:00:57.285005+00:00",
                                y: 817
                            },
                            {
                                x: "2019-10-28T16:00:55.664009+00:00",
                                y: 942
                            },
                            {
                                x: "2019-10-28T16:00:54.883883+00:00",
                                y: 338
                            },
                            {
                                x: "2019-10-28T16:00:53.063869+00:00",
                                y: 408
                            },
                            {
                                x: "2019-10-28T16:00:51.405653+00:00",
                                y: 409
                            },
                            {
                                x: "2019-10-28T16:00:50.524560+00:00",
                                y: 808
                            },
                            {
                                x: "2019-10-28T16:00:49.782930+00:00",
                                y: 872
                            },
                            {
                                x: "2019-10-28T16:00:48.162640+00:00",
                                y: 165
                            },
                            {
                                x: "2019-10-28T16:00:44.063199+00:00",
                                y: 381
                            },
                            {
                                x: "2019-10-28T16:00:43.224259+00:00",
                                y: 810
                            },
                            {
                                x: "2019-10-28T16:00:42.384573+00:00",
                                y: 863
                            },
                            {
                                x: "2019-10-28T16:00:40.730136+00:00",
                                y: 864
                            },
                            {
                                x: "2019-10-28T16:00:39.865737+00:00",
                                y: 788
                            },
                            {
                                x: "2019-10-28T16:00:36.644709+00:00",
                                y: 228
                            }
                        ]
                    }
                ],
                markers: {
                    size: 0,

                },
                title: {
                    text: 'Stock Price Movement',
                    align: 'left'
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [
                            0,
                            90,
                            100
                        ]
                    },

                },
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            return (val / 1000000).toFixed(0);
                        },

                    },
                    title: {
                        text: 'Price'
                    },

                },
                xaxis: {
                    type: 'datetime',

                },
                tooltip: {
                    shared: false,
                    y: {
                        formatter: function (val) {
                            return (val / 1000000).toFixed(0)
                        }
                    }
                }
            }
            new ApexCharts(document.querySelector("#asd"),
                opts).render();
        }
        global.apexcharts = {
            init: init
        };
    }
)(this);
apexcharts.init()
</script>