Fix a JS code with PHP

I am using ApexCHartsJS and i want the DATA to show a PHP variable, my PHP variables looks like this %Grammar% for example: 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) { [login to view URL](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( [login to view URL]("#chart"), options ); [login to view URL](); </script> the expected data is numbers for each var, kindly share your knowledge a very easy small task