Highchart / Highstock shows unformated tooltip lable when data grouping enabled but not used

问题

When using data grouping with datetime in Highcharts / Highstock, there seems to be a problem with the formatting of the tooltip label.

When data grouping is actually applied (i.e. when there would be so many datapoints in the chart that the width of each of them would fall below dataGrouping.groupPixelWidth), the label for the tooltip is created using the dataGrouping.dateTimeLabelFormats configuration option.

But when grouping is not applied, for example when zooming so much that each datapoint width is above the limit, the label for the tooltip is not formatted at all. In the case of a datetime axis, the raw string value of the date will be displayed (same as date.toString()). Setting a tooltip.xDateFormat does not help.

This might also be the case when data grouping is disabled.

See this fiddle: https://jsfiddle.net/Jelmerjellema/v3obp9h3/

Hoover over the data and checkout the tooltip: it shows a nicely formatted datetime range.

Zoom in by selecting part of the graph until you see the data for quarter of an hour. This is the basic ungrouped data. The tooltip now shows the data badly formatted.

workaround
I managed to work around this by making sure grouping is always used. My raw data is for 15 minutes, so I make sure dataGrouping.units contains 15 minute blocks. Then I set dataGrouping.forced to true. This feels like a bad trick because when the incoming data would become 5 minutes blocks, the graph would never display the raw data.

Is there a better way to format the x-value in the tooltip when dateGrouping is enabled but not used?

Thanks!

回答1:

The reason of this issue is that you use moment.js dates instead of timestamps as x values for your points.

I replaced moment.js with standard Date.UTC and Date.now functions (they return timestamps) and everything works as it should:

 //create timedata
 var data = [];
 var m = Date.UTC(2016);
 var until = Date.now();

 while (m < until) {

   data.push({
     x: m,
     y: Math.floor(Math.random() * 1000)
   });
   m += 15 * 60 * 1000;
 }

Live demo: https://jsfiddle.net/kkulig/dLq34dkt/

Docs reference: https://www.highcharts.com/docs/chart-concepts/axes (Datetime paragraph)

来源：https://stackoverflow.com/questions/47563966/highchart-highstock-shows-unformated-tooltip-lable-when-data-grouping-enabled

标签

javascript

Highcharts

highstock