Search code examples
javascriptheatmapapexcharts

Apexcharts Heatmap: display exact x value on hover for each series data

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 specific date, week day, and frequency value whenever the user hovers on a cell. Example:

 ------------
| 2022-02-20 |
| ---------- |
| Sunday: 40 |
 ------------

This is what I have attempted so far:

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'
      },
    }
};

Here is a simplified sample series:

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;

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.

From what I understand, the chart treats the first x value in a column as the column's category. 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?

Update

Here's a demonstration of the heatmap

Apexcharts Heatmap Demo

Update as of 2022-03-01

As suggested by @Patryk Laszuk, I added

formatter: (value,options)=>{
   return options.w.config.series[options.seriesIndex].data[0].x
}

on tooltip.x, however this makes all the cells aligned horizontally have the same x value.

Solution

  • Use formatter https://apexcharts.com/docs/options/tooltip/#xformatter

    tooltip: {
  ...
  x: {
    ...
    formatter: (value,options)=>{
      return options.w.config.series[options.seriesIndex].data[0].x
    }
  },
}