Cannot Implicity convert ‘array’ to ‘string’…sending data from controller to chart js

need help with my code
So the problem is i tried to pass array from the controller to my page that contain a bar chart..But the chart cannot be displayed because it doesnt correctly received the array i passed from the controller.

At this Line on main.php:
var data = {$data};
there is yellow line says “cannot implicity convert array from strings”

ChartController.php

{
    public function actionIndex()
    {

        $commonKpiTotalScoreQ1 = $this->getQuartPerformanceData(1);
        $commonKpiTotalScoreQ2 = $this->getQuartPerformanceData(2);
        $commonKpiTotalScoreQ3 = $this->getQuartPerformanceData(3);
        $commonKpiTotalScoreQ4 = $this->getQuartPerformanceData(4);

        $data = [
            'Q1' => $commonKpiTotalScoreQ1,
            'Q2' => $commonKpiTotalScoreQ2,
            'Q3' => $commonKpiTotalScoreQ3,
            'Q4' => $commonKpiTotalScoreQ4,
        ];

        return $this->render('index', [

            'data' => json_encode($data),
        ]);
    }

main.php

<?php
$this->registerJs(<<<JS

        var data = {$data};
        // Process the fetched data
        var kpiScores = [data.Q1, data.Q2, data.Q3, data.Q4];

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['1st Quarter', '2nd Quarter', '3rd Quarter', '4th Quarter'],
                datasets: [{
                    label: 'Performance Score',
                    data: kpiScores,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
JS
);
?>