Apex Charts custom XAxis tooltip label on mouseover

Question

I have this Apex chart's heatmap ( https://apexcharts.com/ ) with days on x axis (01-31).

When the user mouseover i would like to add the shortened day of the week on tooltip, something like this:

How can i achieve this?

Answer 1

In xaxis change tooltip formatter to semething like this

xaxis: {
  tooltip: {
    formatter: (val, opts) => {
      let day = "FRI"; // your logic for getting day name
      return `${val}<br>${day}`;
    }
  }
},

https://apexcharts.com/docs/options/xaxis/#tooltipFormatter