engineN/app/Views/ppm/wpskpoc.php

<?php echo view('inc/head.php') ?>

<?php
$datapaycomp = "[";
foreach ($paycomp as $rowp) {
    $datapaycomp = $datapaycomp . "{name : 'Jmlbln : " . $rowp->JMLBULAN . "',y: " . $rowp->JMLWP . "},";
}
$datapaycomp = $datapaycomp . "]";

?>
<div class="main-content">
    <div class="container-fluid">
     
        <div class="row">
            <?php if($sourcex == '1'){
                $judul = "Strategis";
            }else{
                $judul = "Kewilayahan";
            } ?>
            <div></div>
            <div></div>
                <h3> <?= $judul?> </h3>
                <div class="row mx-auto">
                    <div id="paycomp" style="height: 400px;"></div>
                </div>
        </div>
    </div>
</div>

<?php echo view('inc/js.php') ?>


 <script>
        Highcharts.setOptions({
            colors3: Highcharts.map(Highcharts.getOptions().colors, function (color) {
                return {
                    radialGradient: {
                        cx: 0.5,
                        cy: 0.3,
                        r: 0.7
                    },
                    stops: [
                        [0, color],
                        [1, Highcharts.color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            })
        });

        // Build the chart
        Highcharts.chart('paycomp', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '',
                align: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<span style="font-size: 1.2em"><b>{point.name}</b></span><br>' +
                            '<span style="opacity: 0.6">{point.percentage:.2f} %</span>',
                        connectorColor: 'rgba(128,128,128,0.5)'
                    }
                }
            },
            series: [{
                name: 'WP Byr',
                data: <?php echo $datapaycomp ?>
            }]
        });
    </script>

</body>