Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Adding a line in the y axis with a flexible X

Hi all,
I have a graph with data that represents the evaluation of patients in a given date, about a given topic. I need to have two lines, to ease the perception of the evaluation. It’s like in the next figure:

In this case I have setted the x0 to: ‘2018-01-01’, and x1 to : x1: ‘2118-03-31’

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            }
                        });

Where eixoX is an array of dates.
But I need this to work for many years, so I need to extend the x0 and x1, to 3000, for instance, but the graph turns into something ridiculous as in the next figure

How can I set the x0 and x1 according to the eixoX values?

I would also like to have the lines more centered in the graph and not in the edges (having more values up and down)

Thanks

Sounds like you need to set layout.xaxis.range and layout.yaxis.range.

In your code snippet above, it looks like your yaxis container isn’t part of the layout argument passed to Plotly.newPlot.

Sorry, I didn’t showed the whole code:

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2018-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2018-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX ?
                            }
                        });



                        window.onresize = function() {
                            Plotly.Plots.resize(gd);
                        };

How should I define the ranges?

like this:

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2018-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2018-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }],
                   // N.B. here!
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX ?
                            }
                        });

Sorry Etienne but I’m not following.

I made this changes but the problem remains because the x0 and x1 are still static. With this code, I get this result.

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        });




                        window.onresize = function() {
                            Plotly.Plots.resize(gd);
                        };

If I do

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: eixoX,
                                y0: 25,
                                x1: eixoX,
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: eixoX,
                                y0: 36,
                                x1: eixoX,
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        });

I get no lines

the

                 yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }

part you’re sending to Plotly.newPlot is in the wrong container object.

I’m not using Plotly.newPlot, but Plotly.Plot and Plotly.Plots to resize the window. Does it matter?
I’ve changed to:

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        });

                        var layout = {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        }



                        window.onresize = function() {
                            Plotly.Plots.resize(gd, layout);
                        };

but the result is the same, as in the first figure.

They behave the same in this case.

Plotly.Plots.resize only accept one argument, so your layout attempt is ignored.


I’m not sure what else I can do to help. Have you tried copy/pasting Adding a line in the y axis with a flexible X ?

the xaxis and yaxis attribute container should be side-by-side with shapes.

well, it worked :slight_smile:
I hadn’t tried…

Thanks!

well, it wasn’t working like I want, but I changed the x0 and x1 to a variable depending on the eixoX values and now it’s working.

let x0 = eixoX[0];
let x1 = eixoX[eixoX.length - 1];

shapes: [{
            type: 'line',
            x0: x0,
            y0: 25,
            x1: x1,
            y1: 25,
            line: {
                color: 'red',
                width: 2
            }

Can I ask you an aside question? because I want to add another trace, but as I’m not doing with the newPlot function, I’m not sure how to do it.
Thanks!