Quiero crear de forma automatica graficas mediante un plugin de acuerdo a una consulta SQL

Actualmente quiero hacer que mi grafica se pinta de forma automáticamente con mi código php ya que este hace una consulta SQL y obtiene resultados requeridos para graficar.

Código JS:

    var conteo0=$(".GraficaConteo0").get(0);
    
    
    var total=$(conteo0).text();
    var dataStr="";
    var colorStr="";
    var StrComa=",";
    
    for(var i = 1; i <= total; i++){
    var conteo=$(".GraficaConteo0").get(i);
    var color0=$(".ColorGrafica0").get(i-1);
    var conteoFull=$(conteo).text();
    var ColorFull=$(color0).text();
    dataStr+="""+conteoFull+"""+StrComa;
    colorStr+="'"+ColorFull+"'"+StrComa;
    if(i==(total-1)){
    StrComa="";
    }
    
    }

alert(dataStr);

// Pie Chart Example
var ctx = document.getElementById("myPieChart1");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: [dataStr],
    datasets: [{
      data: [dataStr],
      backgroundColor: [colorStr],
      hoverBackgroundColor: [colorStr],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});

Código PHP:

$ConteoGrafica0="";
$grafica0="";
$sqlGrafica = "select count(*) as conteo, campo1 as retornocampo from tabla500 group by campo1";
$result=mysqli_query($conn,$sqlGrafica);
$conteo=0;
if ($result->num_rows > 0) {
      $ConteoGrafica0="<label class='GraficaConteo0 d-none'>".$result->num_rows."</label>";
    while($row = $result->fetch_assoc()) {
 $randomColor = rand(0,12);    
$grafica0.="<span class='mr-2'>
                      <i class='fas fa-circle' style='color:".$arrayGrafica[$randomColor]."'></i>".$row["retornocampo"]."
                    </span>";
$ConteoGrafica0.="<label class='GraficaConteo0 d-none'>".$row["conteo"]."</label>";
$ConteoGrafica0.="<label class='ColorGrafica0 d-none'>".$arrayGrafica[$randomColor]."</label>";
$conteo++;
    }

} else {

$grafica0="Sin Informacion";

} 

Codigo HTML5:

       <div class="col-xl-6 col-lg-5">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">Motivos de Cancelacion</h6>
                  <div class="dropdown no-arrow">
                  </div>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="chart-pie pt-4 pb-2">
                    <canvas id="myPieChart1"></canvas>
                  </div>
                  <div class="mt-4 text-center small">
<?php echo $grafica0; ?>
<?php echo $ConteoGrafica0; ?>
                  </div>
                </div>
              </div>
            </div>

El problema es el siguiente yo imprimo en alert(dataStr); y obtengo "1","2","1" y lo pego con su respectivo atributo pero la grafica no se pinta si se supone que reemplazo los valores adecuados, ademas de que si los copio del alert y los pego manualmente si funciona.
Uso este plugin https://www.chartjs.org/.

var conteo0=$(".GraficaConteo0").get(0);

var total=$(conteo0).text();
var dataStr=[]; // Arreglo, no cadena
var colorStr=[];

for(var i = 1; i <= total; i++){
    var conteo=$(".GraficaConteo0").get(i);
    var color0=$(".ColorGrafica0").get(i-1);
    var conteoFull=$(conteo).text();
    var ColorFull=$(color0).text();
    // Agrega el elemento al arreglo
    dataStr.push("'" + conteoFull + "'");
    colorStr.push("'" + ColorFull + "'");
}

data: {
    labels: dataStr,
    datasets: [{
      data: dataStr,
      backgroundColor: colorStr,
      hoverBackgroundColor: colorStr,
// ***** resto de código

    // Agrega el elemento al arreglo, sin comillas
    dataStr.push(conteoFull);
    colorStr.push(ColorFull);