How to use php variables in ApexChartsJS data?

Question

I am using ApexCHartsJS and i want the DATA to show a PHP variable, my PHP variables looks like this '%number%'

i've created variables gra / lis / voc / rea / ave , but the result i get blank chart

<script>
         var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560'];
         var gra = ['%AVERAGE_CATEGORY_POINTS_Grammar%'];
         var lis = ['%AVERAGE_CATEGORY_POINTS_Listening%'];
         var voc = ['%AVERAGE_CATEGORY_POINTS_Vocabulary%'];
         var rea = ['%AVERAGE_CATEGORY_POINTS_Reading%'];
         var ave = ['%CORRECT_SCORE%'];
        var options = {
            chart: {
                height: 500,
                type: 'bar',
                events: {
                    click: function(chart, w, e) {
                        console.log(chart, w, e )
                    }
                },
            },
            colors: colors,
            plotOptions: {
                bar: {
                    columnWidth: '50%',
                    distributed: true
                }
            },
            dataLabels: {
                enabled: true,
            },
            series: [{
                data: [gra,lis,voc,rea,ave]
            }],
            xaxis: {
                categories: ['Grammar / 15', 'Listening / 15', 'Vocabulary / 15', 'Reading / 15', 'Average %'],
                labels: {
                    style: {
                        colors: colors,
                        fontSize: '15px'
                    }
                }
            }
        }

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

        chart.render();
        </script>

the expected data is numbers for each var, kindly share your knowledge

Answer 1

Here are a solution based on How do I pass variables and data from PHP to JavaScript? and on Pass a PHP array to a JavaScript function

<?php

// define/retrieve variables $Grammar, $Listening…

<script>
    var gra = <?php echo json_encode($Grammar);?>;
    var lis = <?php echo json_encode($Listening);?>;
    …
    var options  {
        …
        series: [{
            data: [gra, lis,…]
        }],
        …