Search code examples
javascriptformattingformatdate-formattingapexcharts

ApexCharts: Heatmap tooltip formatter


I'm using apexcharts to display a heatmap chart:

Apex heatmap chart

The series are named with Date objects, which are formatted on the y-axis like this:

yaxis: {
    labels: {
        formatter: function(value){
            if(value instanceof Date){
                return value.toLocaleDateString(undefined, {year: 'numeric', month: 'long'});
            } else {
                return value;
            }
        }
    }
},

How can I get the same kind of formatting for the tooltips? They show the regular string representation of the date object instead, but I only want to show month and year (as on the y-axis):

ApexChart heatmap tooltip


Solution

  • Pass a tooltip value to the options array, and set a formatter for the title value of the y-axis in it:

    tooltip: {
        y: {
            title: {
                formatter: function(value){
                    if(value instanceof Date){
                        return value.toLocaleDateString(undefined, {year: 'numeric', month: 'long'});
                    } else {
                        try {
                            return new Date(value).toLocaleDateString(undefined, {year: 'numeric', month: 'long'});
                        } catch (e) {
                            return value;
                        }
                    }
                }
            }
        }
    }
    

    Make sure to check the type of the value passed to the formatter, and create a new Date-object, if neccessary.