Fixed hover behaviour for multicategory plots

src/components/fx/hover.js

@@ -888,7 +888,17 @@ function createHoverText(hoverData, opts) {
     var xa = c0.xa;
     var ya = c0.ya;
     var axLetter = hovermode.charAt(0);
-    var t0 = c0[axLetter + 'Label'];
+    var axLabel = axLetter + 'Label';
+    var t0 = c0[axLabel];
+
+    // search in array for the label
+    if(t0 === undefined && xa.type === 'multicategory') {
+        for(var q = 0; q < hoverData.length; q++) {
+            t0 = hoverData[q][axLabel];
+            if(t0 !== undefined) break;
+        }
+    }
+
     var outerContainerBB = getBoundingClientRect(gd, outerContainer);
     var outerTop = outerContainerBB.top;
     var outerWidth = outerContainerBB.width;
@@ -2067,7 +2077,7 @@ function getCoord(axLetter, winningPoint, fullLayout) {
 
     var cd0 = winningPoint.cd[0];
 
-    if(ax.type === 'category') val = ax._categoriesMap[val];
+    if(ax.type === 'category' || ax.type === 'multicategory') val = ax._categoriesMap[val];
     else if(ax.type === 'date') {
         var periodalignment = winningPoint.trace[axLetter + 'periodalignment'];
         if(periodalignment) {

test/jasmine/tests/hover_label_test.js

@@ -2640,6 +2640,32 @@ describe('Hover on multicategory axes', function() {
         })
         .then(done, done.fail);
     });
+
+    it('should work with series', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/zz-multicategory_series.json'));
+        fig.data = [fig.data[0]];
+        fig.layout.width = 500;
+        fig.layout.height = 500;
+
+        Plotly.newPlot(gd, fig)
+        .then(function() {
+            gd.on('plotly_hover', function(d) {
+                eventData = d.points[0];
+            });
+        })
+        .then(function() { _hover(200, 200); })
+        .then(function() {
+            expect(eventData.x).toEqual(['High', 4]);
+        })
+        .then(function() {
+            return Plotly.restyle(gd, 'hovertemplate', '%{z} @ %{x} | %{y}');
+        })
+        .then(function() { _hover(200, 200); })
+        .then(function() {
+            expect(eventData.x).toEqual(['High', 4]);
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('hover on traces with (x|y)period positioning', function() {