I am tryng to display data using Apex Chart, the chart is working fine dynamically if its only DATE type. When I use date range search (switching to DATETIME dynamically) to query database the AREA chart does not show chart but only shows figures when you hover on the chart, on the other hand if i change type to BAR it works fine.

What could be wrong? What am I missing?
Please see the image here attached

here is the PHP code

$months = array();
$value1 = array();
 // $value2 = array(); ...etc
for( $m = 1; $m <= 12; $m++ ) {
  try{
        // Check if TO DATE AND FROM DATE fields are not empty
    if(!empty($from_date) || !empty($to_date)) { 
      $selectdate1 = strtotime($from_date); 
      $selectdate2 = strtotime($to_date); 

      for ($nowDate = $selectdate1; $nowDate <= $selectdate2;  
        $nowDate += (86400)) { 

        $actArrayDate = date('Y-m-d', $nowDate); 

        $stmt = $conn->prepare("SELECT SUM(value) as value1 etc FROM  table  WHERE (date(month) IN (:timdate)) AND country LIKE :country AND status = :status");
        $stmt->execute(['timdate'=>$actArrayDate, 'country'=>$country, 'country'=>'%'.$country.'%', 'status'=>1]);

      } 


    } //end check dates
    else{
      // Check if both country and continent fields are not empty

      $stmt = $conn->prepare("SELECT SUM(value) as value1 etc FROM  table  WHERE MONTH(month)=:month AND YEAR(month)=:year AND country LIKE :country AND status = :status");
      $stmt->execute(['month'=>$m, 'year'=>$year, 'country'=>'%'.$country.'%', 'status'=>1]);
    }

    $valueRow = $stmt->fetch(PDO::FETCH_ASSOC);
    $value1 = $valueRow['value1'];
       // .....value2 etc....
    array_push($value1, number_format( sprintf( '%.2f', $value1), 2, '.', '' ));   
// ..........valu2 .....etc
  } // end try

    catch(PDOException $e){
      $_SESSION['error'] ='Something went wrong with the data'.$e->getMessage();
    }

    $num = str_pad( $m, 2, 0, STR_PAD_LEFT );
    $month =  date('M', mktime(0, 0, 0, $m, 1));
    array_push($months, $month);
  }

  // if (isset($_GET['from_date']) || isset($_GET['to_date'])) {
   if(!empty($from_date) || !empty($to_date)) { //Check if dates are not empty
    $selectedFromDate = $_GET['from_date'];
    $selectedToDate = $_GET['to_date'];
    $dateArray = array(); 
    $fromDate1 = strtotime($selectedFromDate); 
    $toDate2 = strtotime($selectedToDate); 
    for ($currentDate = $fromDate1; $currentDate <= $toDate2;  
      $currentDate += (86400)) { 

      $dateDetails = date('Y-m-d', $currentDate); 
      $dateArray[] = $dateDetails; 
    } 
// Display the dates in array format 
    $months = json_encode($dateArray);
    $apexType = "datetime";
    $columWidth ='columnWidth: 300';
  }
// }
  else{
    $months = json_encode($months);
    $apexType = "date";
    $columWidth ='';
  }

And here is the apex js code

 var options = {
  series: [  { name: "Value1 Label", data: <?php echo $value1; ?> }
    // { name: "Value2 Label", data: <?php echo $value2; ?>......etc },
    ],
  chart: {
    height: 350,
    stacked: true,
    type: 'area'
  },
  dataLabels: {
    enabled: false
  },
  colors: ['#color1', //color2...etc
    ],
  stroke: { curve: "smooth", lineCap: "round", width: 0 },
  fill: { type: "solid" },
  xaxis: {
   type: "<?php echo $apexType ?>",
   categories: <?php echo $months; ?>,
   labels: { style: { colors: colors.mutedColor, cssClass: "text-muted", fontFamily: base.defaultFontFamily } },
 },
 yaxis: {
  labels: { style: { colors: colors.mutedColor, cssClass: "text-muted", fontFamily: base.defaultFontFamily } },
},
legend: { position: "bottom", horizontalAlign: 'center', fontFamily: base.defaultFontFamily, fontWeight: 400,
labels: { colors: colors.mutedColor },
},
tooltip: {
  x: {
    format: 'dd/MM/yy HH:mm'
  },
},
};

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