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, it will display the Sunday’s x value. What can I do to display the actual x value of the hovered cell?