Taiftech-LLC
/
admin.dukany.io


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Range Area Chart</title>


    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>

    <script>
        var options = {
            chart: {
                height: 350,
                type: 'area',
            },
            dataLabels: {
                enabled: false
            },
            plotOptions: {
              area: {
                isRange: true
              }
            },
            stroke: {
                curve: 'straight'
            },
            series: [{
                name: 'range',
                data: [
                {
                  x: new Date(1538780400000),
                  y: [6632.01, 6643.59]
                },
                {
                  x: new Date(1538782200000),
                  y: [6630.71, 6648.95]
                },
                {
                  x: new Date(1538784000000),
                  y: [6635.65, 6651]
                },
                {
                  x: new Date(1538785800000),
                  y: [6638.24, 6640]
                },
                {
                  x: new Date(1538787600000),
                  y: [6624.53, 6636.03]
                },
                {
                  x: new Date(1538789400000),
                  y: [6624.61, 6632.2]
                },
                {
                  x: new Date(1538791200000),
                  y: [6617, 6627.62]
                },
                {
                  x: new Date(1538793000000),
                  y: [6605, 6608.03]
                },
                {
                  x: new Date(1538794800000),
                  y: [6604.5, 6614.4]
                },
                {
                  x: new Date(1538796600000),
                  y: [6608.02, 6610.68]
                },
                {
                  x: new Date(1538798400000),
                  y: [6608.91, 6618.99]
                },
                {
                  x: new Date(1538800200000),
                  y: [6612, 6615.13]
                },
                {
                  x: new Date(1538802000000),
                  y: [6612, 6624.12]
                },
                {
                  x: new Date(1538803800000),
                  y: [6603.91, 6623.91]
                },
                {
                  x: new Date(1538805600000),
                  y: [6611.69, 6618.74]
                },
                {
                  x: new Date(1538807400000),
                  y: [6611, 6622.78]
                },
                {
                  x: new Date(1538809200000),
                  y: [6614.9, 6626.2]
                }
                ]
            }],
            title: {
                text: 'Range Area Chart',
                align: 'left',
                style: {
                    fontSize: '16px'
                }
            },
            xaxis: {
                type: 'datetime',
            },
            
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
    </script>
</body>

</html>