title: Apexcharts Heatmap: display exact x value on hover for each series data
body: <p>I'm trying to create a heatmap using apexcharts that shows frequency of activites each week in a year (Check the github contributions heatmap). My goal is to display a tooltip that shows the <strong>specific date</strong>, <strong>week day</strong>, and <strong>frequency value</strong> whenever the user hovers on a cell. Example:</p>
  <pre><code> ------------
  | 2022-02-20 |
  | ---------- |
  | Sunday: 40 |
   ------------
  </code></pre>
  <p>This is what I have attempted so far:</p>
  <pre><code>var options = {
      series: [],
      chart: {
        height: 350,
        type: 'heatmap',
      },
      dataLabels: {
        enabled: true
      },
      xaxis: {
        labels: {
          show: false
        },
        tooltip: {
          enabled: false,
        },
      },
      tooltip: {
        shared: false,
        followCursor: true,
        intersect: false,
        x: {
          show: true,
          format: 'dd MMM'
        },
      }
  };
  </code></pre>
  <p>Here is a simplified sample series:</p>
  <pre><code>var series = [
      {
      name: 'Sunday',
      data: [{
          x: '2022-02-20',
          y: 40
          }]
      },
      {
      name: 'Monday',
      data: [{
          x: '2022-02-21',
          y: 0
          }]
      },
      {
      name: 'Tuesday',
      data: [{
          x: '2022-02-22',
          y: 5
          }]
      },
      {
      name: 'Wednesday',
      data: [{
          x: '2022-02-23',
          y: 100
          }]
      },
      {
        name: 'Thursday',
        data: [{
          x: '2022-02-24',
          y: 17
        }]
      },
      {
        name: 'Friday',
        data: [{
          x: '2022-02-25',
          y: 4
        }]
      },
      {
        name: 'Saturday',
        data: [{
          x: '2022-02-26',
          y: 90
        }]
      },
  ];
  options.series = series;
  </code></pre>
  <p>What happens here is that the apexcharts displays a heatmap for the week of 2022-02-20 (Sunday) to 2022-02-26 (Saturday) vertically from bottom to top (it seems it displays in reverse order). If the user hovers to the Sunday cell it displays the exact tooltip that I provided at the beginning with the values 2022-02-20, Sunday, and 40. However, when the user hovers on cells Monday - Saturday, the tooltip displays the correct values except for the x value. It still displays 2022-02-20.</p>
  <p>From what I understand, the chart treats the first x value in a column as the column's <strong>category</strong>. This means regardless on whether the user hovers to Saturday, or Friday, or any other day it will display the Sunday's x value. What can I do to display the actual x value of the hovered cell?</p>
  <p><strong>Update</strong></p>
  <p>Here's a demonstration of the heatmap</p>
  <p><a href="https://i.stack.imgur.com/RT4ey.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RT4ey.gif" alt="Apexcharts Heatmap Demo" /></a></p>
  <p><strong>Update as of 2022-03-01</strong></p>
  <p>As suggested by @Patryk Laszuk, I added</p>
  <pre><code>formatter: (value,options)=&gt;{
     return options.w.config.series[options.seriesIndex].data[0].x
  }
  </code></pre>
  <p>on <code>tooltip.x</code>, however this makes all the cells aligned horizontally have the same x value.</p>