Formatting xticks in plotlyJS

General Usage
2

Hi,

If you really just wants to have the dates specified as 2004.25 for quarters, then you would only need to set the separators attribute of the layout to “.” (this sets the dot as decimal separators and nothing as the thousands separator) as follows:

layout = Layout(;title = "Some Macroeconomic Aggregates: USA (1960-Q1--2019-Q2)",
        xaxis_title = "Quarterly obervations",
        xaxis_range = [1960, 2020],
        separators = ".",
        yaxis_title = "Bilions of US dollars",
        #yaxis_range=[-2, 2], 
        titlefont_size = 16)

Overall though, you might want to have the x-axis inputs recognized as date formats from plotly (they currently aren’t even in the second example), as you could then exploit the date format specifier.
You can then modify the code you provided as second example as follows:

trace13 = scatter(;x = Date.(period5), y = quarter_data[:,6], name = "FFR", line_color = "Blue")
trace14 = scatter(;x = Date.(period5), y = quarter_data[:,7], name = "UN", line_color = "Red")

layout = Layout(;title = "Some Macroeconomic Aggregates: USA (1960-Q1--2019-Q2)",
        #xaxis: {
        #tickmode= "array", 
        #tickvals = [1, 80, 160, 240],
        #ticktext = ['1960-Q1', '1980-Q1', '2000-Q1', '2020-Q1']
        #      },
            xaxis = attr(
               title = "Quarterly obervations",
               tickformat = "%Y",
               hoverformat = "%Y-Q%q",
               tick0 = "1960/01/01",
               dtick = "M120",
        ),
        #xaxis_range = [1960, 2020],
        yaxis_title = "Percentage points",
        #yaxis_range=[-2, 2], 
        titlefont_size = 16)

p10 = plot([trace13 , trace14], layout)

Where what I did was simply transforming the input data in period5 into yyyy-mm-dd format for creating the trace using the julia Date() function (to allow plotly correctly identifying these as dates).
The other modification in the layout structure is specifying a few xaxis tick attributes.
For the plotly specific attributes for the xaxis, you can find more information in the relevant documentation page

1 Like