How to make the messy date ticks organized

Dash Python
3

@MapleYU
For Dates, Plotly accepts two things:

  1. Strings that are formatted like YYYY-MM-DD, e.g. '2015-01-01' (No other format is accepted)
  2. Datetime objects

If the x-axis data is in one of those two forms, then Plotly will automatically use a date axis which will format your axes correctly.

In your example, your date strings are formatted as YYYY/MM/DD and so Plotly is treating your axes as categorical strings instead of nicely formatted as spaced dates.

Then, you can format the date axes using the tickformat key. Here is an example:

dcc.Graph(figure={
    'data': [{
        'x': ['2015-01-01', '2015-01-10 15:30:12', '2015-04-01'],
        'y': [2, 1, 5]
    }],
    'layout': {
        'xaxis': {
            'tickformat': '%y/%m'
        }
    }
})

In this case, 'tickformat;: '%y/%m' will display the dates as e.g. 16/09. Here is the full list of tickformat options:

    %a - abbreviated weekday name.*
    %A - full weekday name.*
    %b - abbreviated month name.*
    %B - full month name.*
    %c - the locale's date and time, such as %x, %X.*
    %d - zero-padded day of the month as a decimal number [01,31].
    %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
    %f - microseconds as a decimal number [000000, 999999].
    %H - hour (24-hour clock) as a decimal number [00,23].
    %I - hour (12-hour clock) as a decimal number [01,12].
    %j - day of the year as a decimal number [001,366].
    %m - month as a decimal number [01,12].
    %M - minute as a decimal number [00,59].
    %L - milliseconds as a decimal number [000, 999].
    %p - either AM or PM.*
    %Q - milliseconds since UNIX epoch.
    %s - seconds since UNIX epoch.
    %S - second as a decimal number [00,61].
    %u - Monday-based (ISO 8601) weekday as a decimal number [1,7].
    %U - Sunday-based week of the year as a decimal number [00,53].
    %V - ISO 8601 week of the year as a decimal number [01, 53].
    %w - Sunday-based weekday as a decimal number [0,6].
    %W - Monday-based week of the year as a decimal number [00,53].
    %x - the locale's date, such as %-m/%-d/%Y.*
    %X - the locale's time, such as %-I:%M:%S %p.*
    %y - year without century as a decimal number [00,99].
    %Y - year with century as a decimal number.
    %Z - time zone offset, such as -0700, -07:00, -07, or Z.
    %{n}f for fractional seconds with n digits. For example, 2016-10-13 09:15:23.456 with tickformat %H~%M~%S.%2f would display 09~15~23.46*
    %% - a literal percent sign (%).
4 Likes