Format the label in the time scale tooltip

chartjs · Jan 7, 2018 · 9be0d46 · 9be0d46
1 parent 92d033b
commit 9be0d46
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
@@ -403,6 +403,33 @@ function ticksFromTimestamps(values, majorUnit) {
 	return ticks;
 }
 
+function determineLabelFormat(data, timeOpts) {
+	var i, momentDate, hasMillis, hasTime;
+
+	if (timeOpts.tooltipFormat) {
+		return timeOpts.tooltipFormat;
+	}
+
+	// find the label with the most parts (milliseconds, minutes, etc.)
+	// format all labels with the same level of detail as the most specific label
+	for (i = 0; i < data.length; i++) {
+		momentDate = momentify(data[i], timeOpts);
+		if (momentDate.millisecond() !== 0) {
+			hasMillis = true;
+			break;
+		}
+		if (momentDate.second() !== 0 || momentDate.minute() !== 0 || momentDate.hour() !== 0) {
+			hasTime = true;
+		}
+	}
+	if (hasMillis) {
+		return 'MMM D, YYYY h:mm:ss.SSS a';
+	} else if (hasTime) {
+		return 'MMM D, YYYY h:mm:ss a';
+	}
+	return 'MMM D, YYYY';
+}
+
 module.exports = function(Chart) {
 
 	var defaultConfig = {
@@ -621,6 +648,7 @@ module.exports = function(Chart) {
 			me._majorUnit = determineMajorUnit(me._unit);
 			me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
 			me._offsets = computeOffsets(me._table, ticks, min, max, options);
+			me._labelFormat = determineLabelFormat(me._timestamps.data, timeOpts);
 
 			return ticksFromTimestamps(ticks, me._majorUnit);
 		},
@@ -635,11 +663,8 @@ module.exports = function(Chart) {
 			if (helpers.isObject(value)) {
 				label = me.getRightValue(value);
 			}
-			if (timeOpts.tooltipFormat) {
-				label = momentify(label, timeOpts).format(timeOpts.tooltipFormat);
-			}
 
-			return label;
+			return momentify(label, timeOpts).format(me._labelFormat);
 		},
 
 		/**

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
@@ -580,8 +580,8 @@ describe('Time scale tests', function() {
 
 		var xScale = chart.scales.xScale0;
 		expect(xScale.getLabelForIndex(0, 0)).toBeTruthy();
-		expect(xScale.getLabelForIndex(0, 0)).toBe('2015-01-01T20:00:00');
-		expect(xScale.getLabelForIndex(6, 0)).toBe('2015-01-10T12:00');
+		expect(xScale.getLabelForIndex(0, 0)).toBe('Jan 1, 2015 8:00:00 pm');
+		expect(xScale.getLabelForIndex(6, 0)).toBe('Jan 10, 2015 12:00:00 pm');
 	});
 
 	it('should get the correct pixel for only one data in the dataset', function() {