title: Apex Chart Line Graph not showing data label only on first month
body: <p>For some reason, the data label isn't being displayed on my line graph by ApexChart.</p>
  <p><a href="https://i.stack.imgur.com/AC5ME.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AC5ME.png" alt="enter image description here" /></a></p>
  <p>Seems like the chart's JS is relatively simple:</p>
  <pre><code>var options = {
      chart: {
          height: 380,
          type: 'line',
          zoom: {
              enabled: false
          },
          toolbar: {
              show: false
          },
          dropShadow: {
              enabled: true,
              top: 10,
              left: 0,
              bottom: 0,
              right: 0,
              blur: 2,
              color: '#45404a2e',
              opacity: 0.35
          },
      },
      colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
      dataLabels: {
          enabled: true,
      },
      stroke: {
          width: [3, 3, 3, 3, 3],
          curve: 'smooth'
      },
      series: [{
          name: &quot;Informational&quot;,
          data: [5,10,15,20]
      },
      {
          name: &quot;Low&quot;,
          data: [2,3,4,5]
      },
      {
          name: &quot;Medium&quot;,
          data: [9,0,2,3]
      },
      {
          name: &quot;High&quot;,
          data: [1,2,3,4]
      },
      {
          name: &quot;Critical&quot;,
          data: [0,0,0,10]
      }
      ],
      title: {
          text: 'Reported Findings',
          align: 'left',
          style: {
              fontSize: &quot;14px&quot;,
              color: '#ffffff'
          }
      },
      grid: {
          row: {
              colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
              opacity: 0.2
          },
          borderColor: '#f1f3fa'
      },
      markers: {
          style: 'inverted',
          size: 6
      },
      xaxis: {
          categories: &lt;%= raw @series_months %&gt;,
          axisBorder: {
              show: true,
              color: '#bec7e0',
          },
          axisTicks: {
              show: true,
              color: '#bec7e0',
          },
      },
      yaxis: {
          min: 0,
          max: 50
      },
      legend: {
          position: 'top',
          horizontalAlign: 'right',
          floating: true,
          offsetY: -25,
          offsetX: 5
      },
      responsive: [{
          breakpoint: 600,
          options: {
              chart: {
                  toolbar: {
                      show: false
                  }
              },
              legend: {
                  show: false
              },
          }
      }]
  }
  
  var chart = new ApexCharts(
      document.querySelector(&quot;#&lt;%= @chart_id %&gt;&quot;),
      options
  );
  
  chart.render();
  
  
  </code></pre>
  <p>What am I missing that is causing this to not display correctly? It doesn't make sense because if I change one of the first arrays from a 9 to a 10, then it shows up just fine:</p>
  <p><a href="https://i.stack.imgur.com/8QRsD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QRsD.png" alt="enter image description here" /></a></p>