Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Stacked panels and vertical bar layout

Hello everyone,

I am a newbie. I don’t know know if it’s possible but want to give it a try. Here is what I would like to accomplish. I have 3 datasets that I want o stack up in the same page. Now, is it possible to show vertical line down straight through 3 panels that link to a date? And when user hover over one dataset it would show all 3.

Also, I have been putting pieces here and there together so may be it’s wrong. But my graph only display in half of the page in browser. It’s displaying left to right full but not top to bottom. As you can see the bottom page is empty. Thank you in advance.

.
` var data = [
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [6, 10, -2],
error_y: {
type: ‘data’,
array: [1, 2, 3],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [-1, 3, 5],
error_y: {
type: ‘data’,
array: [.7, .8, .9],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y2’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [2, -4, 6],
error_y: {
type: ‘data’,
array: [.2, .4, .6],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y3’
}
];

           var layout = {
               //yaxis: {title: "Wind Speed"}, // set the y axis title
                xaxis: {title: 'Date'}, 
                yaxis: {
                  domain: [0, 0.30], 
                  title: 'Up (cm)'
                }, 
                yaxis2: {
                 domain: [0.35, 0.60], 
                  title: 'East (cm)'
                }, 
                yaxis3: {
                  domain: [0.65, 1.0], 
                  title: 'North (cm)'
                },                    
                //xaxis: {
                //    showgrid: false, // remove the x-axis grid lines
                //    tickformat: "%B, %Y"              // customize the date format to "month, day"
                //},
                margin: {// update the left, bottom, right, top margin
                    l: 40, b: 80, r: 10, t: 20
                }
            };

Plotly.newPlot(‘wind-speed’, data, layout);

var myPlot = document.getElementById(‘wind-speed’);
myPlot.on(‘plotly_hover’, function (eventdata){
var points = eventdata.points[0],
pointNum = points.pointNumber;

Plotly.Fx.hover('wind-speed',[
    { curveNumber:0, pointNumber:pointNum },
    { curveNumber:1, pointNumber:pointNum },
    { curveNumber:2, pointNumber:pointNum },
]);

});`

This https://plot.ly/javascript/shapes/#vertical-and-horizontal-lines-positioned-relative-to-the-axes is a good place to start.

Thanks. I have looked at the example but I want vertical line to cross 3 panels and link 3 dataset together as one. If I could group 3 dataset into annotation would be great. I am still exploring that.