Hovermode compare and scaleanchor

plotly.js
1

Hello everyone,

I found a great example of what I need but it’s not working as expected. I need to show values from all traces by using hovermode:‘compare’. But that breaks horizontal zooming using scaleanchor. I finally got horizontal zooming working with etienne help. But now combining hovermode:‘compare’ and scaleanchor:‘y’ do not seem to work together. Is that combination not allowed? Is there a fix? Thanks

        var names = ['A', 'B', 'C']
        var trace1 = {
            x: [4, 5, 6],
            y: [1, 2, 3],
            text: names,
            hoverinfo: 'x+y+text',
            xaxis: 'x',
            yaxis: 'y',
            mode: 'markers',
            type: 'scatter'
        };

        var trace2 = {
            x: [50, 60, 70],
            y: [1, 2, 3],
            text: names,
            hoverinfo: 'x+y+text',
            xaxis: 'x2',
            yaxis: 'y2',
            mode: 'markers',
            type: 'scatter'
        };

        var data = [trace1, trace2];

        var layout = {
            hovermode: 'compare',
            xaxis: {anchor: 'y'},
            yaxis: {domain: [0, 0.45], scaleanchor: 'y'},
            xaxis2: {anchor: 'y2'},
            yaxis2: {domain: [0.55, 1], scaleanchor: 'y'}

        };

        Plotly.newPlot('graph', data, layout);
        var myPlot = document.getElementById('graph');
        myPlot.on('plotly_hover', function (eventdata) {
            console.log(eventdata.xvals);
            Plotly.Fx.hover('graph',
                    [
                        {curveNumber: 0, pointNumber: eventdata.points[0].pointNumber},
                        {curveNumber: 1, pointNumber: eventdata.points[0].pointNumber},
                    ],
                    ['xy', 'x2y2']
                    );
        });
2

Looks like you have scaleanchor set to y in layout.yaxis - which is forbidden. I think you want scaleanchor: 'x' there.

3

Thanks but changing to scaleanchor: ‘x’ changes the layout completely. See below.

scaleanchor_x
scaleanchor_x.PNG1321×384 3.96 KB

Currently, scaleanchor: ‘y’ fix my horizontal zoom issue. However, by adding plotly_hover to show labels for all traces cause this issue. Is this a bug?

4

Thanks but changing to scaleanchor: ‘x’

Tweaking yaxis.scaleratio should do the trick.

I would be very very very surprised. Those two things have no relation whatsoever.

5

After many trial and error none seem to work. But I found an old link from your truly etienne and that makes everything working as expected. Here is what I was after. Thanks again.

old post: Get values on multiple axes
old link: https://github.com/plotly/plotly.js/pull/301

        var trace1 = {
            x:[4,5,6],
            y: [1,2,3]
        };

        var trace2 = {
            x:[4,5,6],
            y: [2.1,2,2.5],
            yaxis: 'y2'
        };

        var trace3 = {
            x:[4,5,6],
            y: [3,2,1],
            yaxis: 'y3'
        };

        var data = [trace1, trace2, trace3];

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

        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},
                    ],
                    ['xy', 'xy2', 'xy3']                        
                    );
        });
1 Like