Title not centered

[VivaldoMendes]

Hi, I have upgraded PlotlyJS to v0.18.3 and PlotlyBase to v0.8.4. I have a minor issue with the plot titles. When I have an individual plot, the title is not centered (it is placed on the left-hand side of the plot). But when I am dealing with subplots, the titles come out in the right places. Please see the figures below. Help would be very much appreciated. Thanks.

MWE:

using PlotlyJS
y = randn(200);
plot(y, Layout(title = "My title is not centered", yaxis_title = "y(t)", xaxis_title = "t"))

[empet]

Now the title has two attributes: text and x (where x gives the x-position of your title). To center it define:

layout=Layout(title_text="your title", title_x=0.5)

[VivaldoMendes]

@empet, thanks a lot.

[sglyon]

Hi @VivaldoMendes this was intentional and one of hopefully the last breaking changes for the forseeable future.

Thanks @empet for a quick solution!

I'm going to close here as I don't think there are any bugs. If you have further questions, please don't hesitate to reach out!

[VivaldoMendes]

@sglyon Thanks for the information. I found out a minor problem that I still do not know how to overcome. Now, the titles come out centered at the top of an individual plot. But when I combine two previous plots and use them as subplots of another plot, their titles disappear and I get "new text" instead of the correct title.

MWE Suppose I have two individual plots named "p10_6" and "p10_8". For example, the plot named as p10_8 looks like the following figure (the title is correctly centered):

Now, I use the usual syntax for producing subplots with those two plots:

p10_9 = [p10_6   p10_8]

The subplots come out OK, with the exception that the titles are gone.

However, if I leave the titles aligned on the top left-hand corner of each individual plot, the titles in the subplots come out visible and correctly placed. How do I set the titles in the subplots, by using the subplots syntax? I hope there is a simple turnaround for this problem because this way of producing subplots is extremely useful in PlotlyJS. Thanks.

[sglyon]

oh no! that isn't supposed to happen. Can you post code that demonstrates your issue? That will make it easier to debug and fix

[VivaldoMendes]

It is very easy to show what is not working OK. The x,y labels are OK, the only thing that is not working properly is titles. Let's see the minimum working example possible:

using PlotlyJS
y = randn(200);
z = rand(200);

# centering titles in individual plots; titles vanish in subplots
p1 = plot(y, name  = "Fiona", Layout(title_text = "My title is centered", title_x = 0.5, yaxis_title = "y(t)", xaxis_title = "t"))
p2 = plot(z, name = "Shrek", Layout(title_text = "My title is centered", title_x = 0.5, yaxis_title = "z(t)", xaxis_title = "t"))
p3 =[p1  p2]

#titles not centered in individual plots; titles centered in subplots
p4 = plot(2*y, name  = "2Fionas", Layout(title = "My title is NOT centered", yaxis_title = "2y(t)", xaxis_title = "t"))
p5 = plot(2*z, name  = "2Shreks", Layout(title = "My title is NOT centered", yaxis_title = "2z(t)", xaxis_title = "t"))
p6 = [p4 p5]

Plot p1 looks like:

Plot p2 looks like:

Plot p3 looks like:

Plot p4 looks like:

Plot p5 looks like:

Plot p6 looks like:

This MWE was generated using the latest versions of PlotlyJS and Plotly Base, in VSCode. Thanks.

[VivaldoMendes]

Hi @sglyon,

I noticed that the latest versions of PlotlyJS v0.18.3 and PlotlyBase v0.8.4 introduced one particular change, which I wonder whether was intentional or just a missed small detail in the migration process.

Suppose I have two time series. In the previous versions, both values are highlighted when we hover over the points of the time series. Now, only the points of one of the time series (one at a time) is highlighted in the new versions.

I do not know if this must be so or not. But from a visual point of view, the previous versions looked better on this point. Below I provide the code that delivers the two different outputs. I am doing this with Pluto v0.15.1.

Thanks.

Outupt in the new version of PlotlyJS:

Output in the previous version:

Same code on both versions:

begin
    using PlotlyBase
    using HypertextLiteral
    using CSV
    using DataFrames
    using Dates
    using MonthlyDates
end

period3_2 = QuarterlyDate(2001, 3):Quarter(1):QuarterlyDate(2020, 4)

trace3_17 = scatter(;x = Date.(period3_2), y = spread_inv[:,2], 
    name = "BAA10Y", line_color = "Blue", mode = "markers+lines", 
    line_width="0.5", marker_size ="5")

trace3_18 = scatter(;x = Date.(period3_2), y = spread_inv[:,3], 
    name = "FFR", line_color = "Red", mode = "markers+lines", 
    line_width="0.5", marker_size ="5")

layout3_18 = Layout(;

    title = "BAA10Y vs FFR for the USA: (2001.Q3--2020.Q4)",

        xaxis = attr(
              title = "Quarterly obervations",
              tickformat = "%Y",
              hoverformat = "%Y-Q%q",
              tick0 = "2001/10/01",
              dtick = "M48"),

         #xaxis_range = [1960, 2020],
         yaxis_title = "Percentage points",
         #yaxis_range=[-2, 2], 
         titlefont_size = 16
          )

p3_18 = Plot([trace3_17 , trace3_18], layout3_18)

[empet]

Just add to layout:

hovermode="x"

This setting ensures that hovering at some x-ccordinate value, all corresponding y-values in your plot are displayed. This was the default hovermode for many years, but starting to plotly.js 2.+ the default hovermode is "closest". https://plotly.com/javascript/reference/layout/#layout-hovermode. That's why with PLotlyJS.jl, v 0.18.3 you noticed this behaviour.

[sglyon]

Thanks @empet that's spot on!

[sglyon]

@VivaldoMendes I found the "new text" issue and it will be resolved in the soon to be released 0.8.7 of PlotlyBase.jl

Thanks for posting a great MWE and sticking with it.

[VivaldoMendes]

Hi @sglyon, @empet,

It is my pleasure. I am in the middle of migrating a 12 weeks course into Pluto and PlotlyJS. So I passed through this transition process to the new versions of PlotlyJS and PlotlyBase, and naturally found these minor issues that are the cost we have to pay for having better and faster software. Congrats on the fantastic piece of software that you have developed. It is simply amazing what we can do with PlotylyJS and Pluto.

The hover thing is solved—many thanks.