title: ApexChart Column on top of other columns
body: <p>I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.</p>
  
  <pre><code>var options777 = {
      chart: {
          id: 'test',
          height: 350,
          type: 'bar'
      },
      plotOptions: {
          bar: {
              columnWidth: '50%' 
          }
      },
      series: [{
          name: 'Eligibility',
          data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
      }],
      dataLabels: {
          enabled: false
      },
      stroke: {
          width: 2
      },
      grid: {
          row: {
              colors: ['#fff', '#f2f2f2']
          }
      },
      xaxis: {
          labels: {
              rotate: -45
          },
          categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
          tickPlacement: 'on',
          type: 'datetime'
      },
      yaxis: {
          title: {
              text: 'Eligibility',
          },
      },
      fill: {
          type: 'gradient',
          gradient: {
              shade: 'light',
              type: "horizontal",
              shadeIntensity: 0.25,
              gradientToColors: undefined,
              inverseColors: true,
              opacityFrom: 0.85,
              opacityTo: 0.85,
              stops: [50, 0, 100]
          },
      }
  };
  
  var chart777 = new ApexCharts(
      document.querySelector("#myChart"),
      options777
  );
  chart777.render(); 
  </code></pre>
  
  <p>When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another? </p>
  
  <p><a href="https://i.stack.imgur.com/hE9UI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hE9UI.png" alt="enter image description here"></a></p>