dwd

<script>
  const total_products = document.getElementById('total_products')?.innerText;
  const total_customer = document.getElementById('total_customer')?.innerText;
  const total_orders = document.getElementById('total_orders')?.innerText;
  const role = '<?= $role ?>';

  var options = {
    series: [{
    name: 'data',
    data: role == 'supplier' ? [total_products, total_customer, total_orders] : [total_orders]
  }],
    chart: {
    height: 350,
    type: 'bar',
  },
  plotOptions: {
    bar: {
      borderRadius: 10,
      dataLabels: {
        position: 'top', // top, center, bottom
      },
    }
  },
  dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
      fontSize: '16px',
      colors: ["#304758"]
    },
    formatter: function (val) {
      return val + " data";
    }
  },
  xaxis: {
    categories: role == 'supplier' ? ["Barang", "Customer", "Pesanan"] : ["Pesanan"],
    position: 'bottom',
    axisBorder: {
      show: false
    },
    axisTicks: {
      show: false
    },
    crosshairs: {
      fill: {
        type: 'gradient',
        gradient: {
          colorFrom: '#D8E3F0',
          colorTo: '#BED1E6',
          stops: [0, 100],
          opacityFrom: 0.4,
          opacityTo: 0.5,
        }
      }
    },
    tooltip: {
      enabled: false,
    }
  },
  yaxis: {
    axisBorder: {
      show: false
    },
    axisTicks: {
      show: false,
    },
    labels: {
      show: false,
      formatter: function (val) {
        return val + "%";
      }
    },
  },
  tooltip: {
  enabled: false // Disable tooltip for entire chart
}
  };

  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();
</script>