<div class="report-content">
    <div class="text-center">
        <h1>LineChart</h1>
        <p class="lead">
            This example shows how to create beautiful LineChart
        </p>
    </div>
    <style>
        .apexcharts-canvas {
            margin: 0 auto;
        }
    </style>
    <div style="margin-bottom:50px;">
        <?php
        $forecast_data = [
            [
                'date',
                'forecast'
            ],
            [
                "1/11/2000",
                4
            ],
            [
                "2/11/2000",
                3
            ],
            [
                "3/11/2000",
                10
            ],
            [
                "4/11/2000",
                9
            ],
            [
                "5/11/2000",
                29
            ],
            [
                "6/11/2000",
                19
            ],
            [
                "7/11/2000",
                22
            ],
            [
                "8/11/2000",
                9
            ],
            [
                "9/11/2000",
                12
            ],
            [
                "10/11/2000",
                7
            ],
            [
                "11/11/2000",
                19
            ],
            [
                "12/11/2000",
                5
            ],
            [
                "1/11/2001",
                13
            ],
            [
                "2/11/2001",
                9
            ],
            [
                "3/11/2001",
                17
            ],
            [
                "4/11/2001",
                2
            ],
            [
                "5/11/2001",
                7
            ],
            [
                "6/11/2001",
                5
            ]
        ];
        \koolreport\apexcharts\LineChart::create(array(
            "title" => "Forecast",
            "dataSource" => $forecast_data,
            "columns" => array(
                "date" => [
                    "label" => "Date",
                    "categoryType" => "datetime",
                ],
                "forecast" => array(
                    "label" => "Forecast",
                    "type" => "number",
                    "prefix" => "$",
                ),
            ),
            "options" => [
                "forecastDataPoints | count" => 7,
                'fill | gradient' => [
                    'shade' => 'dark',
                    'gradientToColors' => ['#FDD835'],
                    'shadeIntensity' => 1,
                    'type' => 'horizontal',
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100, 100, 100]
                ],
                'yaxis' => [
                    'min' => -10,
                    'max' => 40
                ],
            ],
            "strokeWidth" => 5,
            'fillType' => 'gradient',
            "showLegend" => false,
            // "showLabel" => true,
            // "height" => "600px",
            "maxWidth" => 800,
        ));
        ?>
    </div>
</div>