Plotly_hover not displaying correctly

plotly.js
1

Hi all,

I don’t know if because there’s too many traces but plotly_hover display is skewed. When hover over ‘2013/01/15’ some traces display correctly but skew others and shows the wrong date too. When hovering over other dates work as intended. Any ideas? Thanks.

                    myPlot.on('plotly_hover', function (eventdata) {
                        Plotly.Fx.hover('myDiv',
                                [
                                    {curveNumber: 0, pointNumber: eventdata.points[0].pointNumber},
                                    {curveNumber: 1, pointNumber: eventdata.points[0].pointNumber},
                                    {curveNumber: 2, pointNumber: eventdata.points[0].pointNumber},
                                    {curveNumber: 3, pointNumber: eventdata.points[0].pointNumber},
                                    {curveNumber: 4, pointNumber: eventdata.points[0].pointNumber},
                                    {curveNumber: 5, pointNumber: eventdata.points[0].pointNumber}
                                ],
                                ['xy', 'xy2', 'xy3', 'xy', 'xy2', 'xy3']
                                //same results  ['xy', 'xy2', 'xy3']
                                );
                    });

hover
hover.png1280×720 80.6 KB

2

Can you share the data you used to generate your graph?

3

The data I have is rather large. I have a sample below that shows the problem. Now playing with the 3 points I see different display results. Please let me know if I did something wrong. Thanks.

       var trace1 = {
            x: ['2013-01-01', '2013-01-03', '2013-01-05'],
            y: [1, 2, 3]
        };

        var trace2 = {
            x: ['2013-01-01', '2013-01-03', '2013-01-05'],
            y: [2.1, 2, 2.5],
            yaxis: 'y2'
        };

        var trace3 = {
            x: ['2013-01-01', '2013-01-03', '2013-01-05'],
            y: [3, 2, 1],
            yaxis: 'y3'
        };

        trace4 = {
            x: ['2013-01-03', '2013-01-03', '2013-01-03'],
            y: [-10, 10, "null"],
            mode: 'lines',
            name: 'discontinuity',
            text: ["jump","jump",""],
            hoverinfo: 'text+x+name',
            yaxis: 'y',
            line: {color: "orange", width: 2, dash: "dot"}
        };
        trace5 = {
            x: ['2013-01-03', '2013-01-03', '2013-01-03'],
            y: [-10, 10, "null"],
            mode: 'lines',
            name: 'discontinuity',
            text: ["jump","jump",""],
            hoverinfo: 'text+x+name',
            yaxis: 'y2',
            line: {color: "orange", width: 2, dash: "dot"}
        };
        trace6 = {
            x: ['2013-01-03', '2013-01-03', '2013-01-03'],
            y: [-10, 10, "null"],
            mode: 'lines',
            name: 'discontinuity',
            text: ["jump","jump",""],
            hoverinfo: 'text+x+name',
            yaxis: 'y3',
            line: {color: "orange", width: 2, dash: "dot"}
        };
        var data = [trace1, trace2, trace3, trace4, trace5, trace6];

        var layout = {
            yaxis: {range: [-10, 10],
                domain: [0, 0.3], scaleanchor: 'y'
            },
            yaxis2: {range: [-10, 10],
                domain: [0.35, 0.65], scaleanchor: 'y'
            },
            yaxis3: {range: [-10, 10],
                domain: [0.7, 1], scaleanchor: 'y'
            },
            hovermode: 'closest',
            title: 'hover',
        };

        Plotly.newPlot('graph', data, layout);
        var myPlot = document.getElementById('graph');
        myPlot.on('plotly_hover', function (eventdata) {
            Plotly.Fx.hover('graph',
                    [
                        {curveNumber: 0, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 1, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 2, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 3, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 4, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 5, pointNumber: eventdata.points[0].pointNumber}
                    ],
                    ['xy', 'xy2', 'xy3']
                    );
        });
4

Codepen for future use: https://codepen.io/etpinard/pen/KXbgYZ?editors=0010

Now playing with the 3 points I see different display results.

Hmm. I’m not sure I understand what you’re trying to do here. eventdata.points[0].pointNumber does depend on the point you’re hovering on, so you should indeed see different display results.

5

Thanks, I see the issue now. It’s because of the repeated dates. However, that’s the only way I know how to draw vertical lines. I tried shapes but I have an array of inputs imported from data file. Is there another way?

6

I added some logic and it seems to work now. It’s not clean but it works. Thanks again.