当 x 轴采用时间格式 (HH:MM) 时，Highchart 的热图 plot 无法正确渲染

Question

I want to plot a heatmap for my data using highchart js plotting library in R -

library(highcharter)
library(dplyr)
library(chron)
library(viridisLite )


fntltp <- JS("function(){
  return this.series.yAxis.categories[this.point.y] + this.point.x + ':' + ':<br>' +
  Highcharts.numberFormat(this.point.value, 4);
}")

Data = data.frame(Time1 = seq(as.POSIXct('2020-04-30 00:00:00', tz = "UTC"), as.POSIXct('2020-05-06 00:00:00', tz = "UTC"), by = '10 min')) %>%
           mutate(Date = paste(substr(weekdays(as.Date(Time1, tz = "UTC")), 1, 3), format(as.Date(Time1, tz = "UTC"), "%b,%d"), " "),
                'Value' = runif(865, -1, 1),
                Time = times(format(Time1, "%H:%M:%S"))) 

hchart(Data, "heatmap", hcaes(x = Time, y = Date, value = Value)) %>% 
  hc_colorAxis(stops = color_stops(30, rev(viridis(30)))) %>% 
  hc_yAxis(reversed = TRUE, offset = 2, tickLength = 0,
           gridLineWidth = 0, minorGridLineWidth = 0,
           labels = list(style = list(fontSize = "12px"))) %>%
  hc_xAxis(labels = list(type = 'datetime', dateTimeLabelFormats = list(day = '%H:%M'))) %>%
  hc_legend(layout = "vertical", verticalAlign = "middle",
            align = "right", valueDecimals = 0) %>% 
  hc_size(height = 800) %>% 
  hc_tooltip(formatter = fntltp)

Clearly this is not the correct plot, when my x-axis is formatted in HH:MM (in time). Additionally in the legend too, the x-axis values are not flowing in correctly.

Furthermore, the order of y-axis is also not smooth, as I wanted to have the latest day in the bottom and the first day at the top.

Any pointer how to correct those irregularities will be highly helpful.

Modified post based on @raf18seb's reply -

Below is my new plot with simplified data -

library(highcharter)
library(dplyr)
library(chron)

set.seed(1)
Data = data.frame(Time1 = seq(as.POSIXct('2020-04-30 00:00:00', tz = "UTC"), as.POSIXct('2020-05-06 00:00:00', tz = "UTC"), by = '10 min')) %>%
           mutate(Date = paste(substr(weekdays(as.Date(Time1, tz = "UTC")), 1, 3), format(as.Date(Time1, tz = "UTC"), "%b,%d"), " "),
                            'Value' = runif(865, -1, 1),
                    Day_Time = as.character(times(format(Time1, "%H:%M:%S"))))

tail(Data)

hchart(Data, "heatmap", hcaes(x = Day_Time, y = Date, value = Value)) %>% 
  hc_yAxis(reversed = TRUE, offset = 2, tickLength = 0,
           gridLineWidth = 0, minorGridLineWidth = 0,
           labels = list(style = list(fontSize = "12px"))) %>%
  hc_xAxis(labels = list(type = 'datetime', dateTimeLabelFormats = list(day = '%H:%M'))) %>%  
  hc_size(height = 800)

With this I want to achieve below -

1. In the x-axis, I want to show only HH:MM instead of HH:MM:SS .
2. The y-axis should be sorted in increasing order of day . ie May-6 should come at bottom and April-30 should be at top
3. Also want to change the colour gradient ie colour should start from red (for -1) and end at green (+1) with yellow for midpoint (0)
4. It would also be good if I can customise the tooltip. Instead of default show here, my ideal tooltip should be <Value: data-value><br><Date: date as in y-axis><br><Time: Time as in x-axis in HH:MM format>

Any pointer how to achieve them would be highly helpful

Answer 1

Short answer: there is a problem with your data.

Explanation: I managed to get your data out of your R chart. You have 865 points and, after simplifying, your data looks like:

{x: 0.00694444444444444, y: 0, value: 0.28064949112013},
{x: 0.0138888888888889, y: 0, value: -0.600626351311803},
{x: 0.0208333333333333, y: 0, value: 0.30516293970868},
...
{x: 0.166666666666667, y: 4, value: -0.619758530985564},
...

Your x values are not integers - that is why your chart looks and behaves creepy when you hover over it.

This is a JavaScript simplified demo with your data: https://jsfiddle.net/BlackLabel/5s3gft6u/ And this is a simple example with decimal x data to help you understand how it behaves: https://jsfiddle.net/BlackLabel/4j29o3Lh/

So, if I understood your issue correctly, the problem is with your data (x values) and you need to provide different data if you want to make it work in Highcharts. I don't know what data exactly because I don't know what you want to display.

Additionally, you can try with https://api.highcharts.com/highcharts/series.heatmap.colsize

Maybe setting it to 0.01 will meet your requirement.

edit to your new requirements:

1. Again, there is a problem with your data. In JavaScript with proper data, you can format xAxis labels in many ways eg having this.value in labels.formatter The problem is that Highcharter (or R) parses your data somehow and this.value is a more complicated object without timestamp value. I don't know how to parse it..

2. Again - your data. You have points April-30 with y: 0 and May-3 with y: 1 . In Highcharts, y value matters. If you want to have a proper order, then you need to parse your data and match the proper date with y .

3. You can use tooltip.formatter to define whatever you want to display in the tooltip