ColumnChart

<?php

require_once "../../../../load.koolreport.php";
require_once "MyReport.php";

$report = new MyReport;
$report->run()->render();

<?php

class MyReport extends \koolreport\KoolReport
{

}

<div class="report-content">
    <div class="text-center">
        <h1>ColumnChart</h1>
        <p class="lead">
            This example shows how to create beautiful ColumnChart
        </p>
    </div>
    <style>
        .apexcharts-canvas {
            margin: 0 auto;
        }
    </style>
    <div style="margin-bottom:50px;">
        <?php
        $data = [
            [
                'category',
                'Q1 Budget',
                'Q1 Actual',
                'Q2 Budget',
                'Q2 Actual'
            ],
            [
                "Online advertising",
                44000,
                48000,
                13000,
                20000
            ],
            [
                "Sales Training",
                55000,
                50000,
                36000,
                40000
            ],
            [
                "Print advertising",
                41000,
                40000,
                20000,
                25000
            ],
            [
                "Catalogs",
                67000,
                65000,
                8000,
                10000
            ],
            [
                "Meetings",
                22000,
                25000,
                13000,
                12000
            ],
            [
                "Public relations",
                43000,
                40000,
                27000,
                28000
            ]
        ];
        \koolreport\apexcharts\ColumnChart::create(array(
            "dataSource" => $data,
            "columns" => array(
                "category",
                'Q1 Budget' => [
                    "group" => 'budget',
                ],
                'Q1 Actual' => [
                    "group" => 'actual',
                ],
                'Q2 Budget' => [
                    "group" => 'budget',
                ],
                'Q2 Actual' => [
                    "group" => 'actual',
                ]
            ),
            "options" => [
                'stroke' => [
                    'width' => 1,
                    'colors' => [
                        '#fff'
                    ]
                ],
                'dataLabels | formatter' => "(val) => {
                        return val / 1000 + 'K'
                }",
                'fill | opacity' => 1,
                'yaxis | labels | formatter' => "(val) => {
                    return val / 1000 + 'K'
                }",
                'legend' => [
                    'position' => 'top',
                    'horizontalAlign' => 'left'
                ]
            ],
            "stacked" => true,
            'colors' => [
                '#80c7fd',
                '#008FFB',
                '#80f1cb',
                '#00E396'
            ],
            "showLabel" => true,
            // "height" => "600px",
            "width" => "85%",
        ));
        ?>
    </div>

</div>