How to make the messy date ticks organized

Dash Python
1

Hello, everyone, I’ve been using the dash package to produce a lot of beautiful pictures.
However, I found it a little bit annoying when setting a column of date type as X-axis values and it sometimes make the delivery of information messy (e.g. like the following picture).
Is there a good way I can set the X-axis ticks neatly and logically? For example, it will help a lot if the ticks can be shown every month/quarter instead of setting the total number of ticks and making the x-ticks messy.

image
image.png940×418 93.6 KB

2

Set “tickvalues”

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
4

That’s a perfect solution, Thank you sooooo much

6

Lets’s suppose there are two dates in the format DD/MM/YYYY which are 02/03/2017 and 02/03/2018.
Then value of which date will be represented on the x-axis.

7

Thanks. is it possible to get the minutes since UNIX epoch? Thanks