<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-bar-chart"></div>

<script>
  var options = {
    chart: { height: 350, type: 'bar', },
    plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' } } },
    dataLabels: { enabled: true, offsetX: -6 },
    colors: [app.color.orange, 'rgba('+ app.color.componentColorRgb + ', .5)'],
    stroke: { show: true, width: 1, colors: [app.color.componentBg] },
    series: [
      { data: [44, 55, 41, 64, 22, 43, 21] },
      { data: [53, 32, 33, 52, 13, 44, 32] }
    ],
    xaxis: {
      categories: [2018, 2019, 2020, 2021, 2022, 2023, 2024]
    }
  };
  
  var chart = new ApexCharts(
    document.querySelector('#apex-bar-chart'),
    options
  );

  chart.render();
</script>