Pass PHP variable data to JS outside of HTML

Question

Hello, I’m trying to include a JS chart on my PHP page, the problem is that all the data comes from the queries on the PHP page and the chart only works if it stays in a file. js separate. this is a part of the code.

at the moment it looks like this: PHP page

<?php
     $query_c = "SELECT * FROM caixa WHERE MONTH(dia) = $m AND YEAR(dia) = $y";
      $result_c = mysqli_query($conectar, $query_c);
      while ($linhas_c = mysqli_fetch_assoc($result_c)){
      $servd += (float)$linhas_c['servd'];
      $servc += (float)$linhas_c['servc'];
      $receitabruta = $servd+$servc;
      }
      echo "R$ ".$receitabruta.",00";
      $diferenca = $receitabruta-$receitabrutaomp;
?>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12"> 
    <div class="card">
       <div class="card-body">
           <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
       </div>
    </div>
</div>

Page JS:

Highcharts.chart('container', {
 chart: {
zoomType: 'xy'
},
title: {
text: 'Faturamento Anual'
 },
subtitle: {
text: 'Total em Serviços'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
  format: '{value}',
  style: {
    color: Highcharts.getOptions().colors[1]
  }
},
title: {
  text: 'Quantidade',
  style: {
    color: Highcharts.getOptions().colors[1]
  }
}
}, { // Secondary yAxis
title: {
  text: 'Valor',
  style: {
    color: Highcharts.getOptions().colors[0]
  }
},
labels: {
  format: 'R$ {value}',
  style: {
    color: Highcharts.getOptions().colors[0]
  }
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Valor',
type: 'column',
yAxis: 1,
//a intensão é preencher com os valores da variável $receitabruta.
data: [$receitabruta, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
  valueSuffix: ''
}


}, {
name: 'Quantidade',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
  valueSuffix: ''
}
}]
});