Hline and PlotlyJS

General Usage
1

Today it gave me a bit of a headache to figure out how to use the function hline() inside a PlotlyJS-figure.
By text string search inside the PlotlyJS-package I was able to put a minimal example together, I hope it helps others to get started.
Maybe someone knows a good tutorial for PlotlyJS that describe such things as xref="paper" in combination with shapes?
Here my example:

function myplot()
    trace_ = scatter(;x = [1,2,3,4,5], y = [-2,-1,0,1,2])
    plt_layout = PlotlyJS.Layout(;
        shapes = PlotlyJS.hline([0], 0, [0.0, 1.0]; xref="paper", line_color="green", line_dash="dash", ),
    )
    return PlotlyJS.Plot(trace_, plt_layout)
end

hdl_ = myplot()
2

It’s easier to use add_hline!, add_vline! :

function myplot()
    fig = Plot(scatter(;x = [1,2,3,4,5], y = [-2,-1,0,1,2]), 
               Layout(width=600, height=400))
    add_hline!(fig, 0.0; line_color="green", line_dash="dash")
    add_vline!(fig, 3.5; line_color="red")
    add_vrect!(fig, 1.5, 2; line_width=0, fillcolor="red", opacity=0.2)
    fig
end
hdl_ = myplot()
1 Like