In my controller I have this query :

$categories = DB::table('categories')
    ->select('type',DB::raw('COUNT(*) as count_type')) 
    ->groupBy('type')
    ->orderBy('type','desc')
    ->get();

When I populate series and labels with static results everything works fine, but when I try to populate it from database it doesn't work, The whole problem is with series and labels as shown below in the script :

    <script>
            var options = {
here=>        series: [@foreach($categories as $categorie) $categorie->count_type @endforeach],
              chart: {
              width: 380,
              type: 'pie',
            },
and here=>    labels: [@foreach($categories as $categorie) $categorie->type @endforeach],
            responsive: [{
              breakpoint: 480,
              options: {
                chart: {
                  width: 200
                },
                legend: {
                  position: 'bottom'
                }
              }
            }]
            };
            var chart = new ApexCharts(document.querySelector("#chart"), options);
            chart.render();
    </script>

So the question is how can I populate this graph from my query result?