Show Sidebar Hide Sidebar

Dates, Time Series and Timestamp Format in Plotly

Dates and Times in Plotly

Step 1

Dates, Time Series and Timestamp Format in Plotly

Making a graph with dates and times?

If you’re uploading data into the grid, our parsing algorithm checks your data against more than 400 date formats to find the best match, even when your dates are in several styles. Read more below to learn how to enter dates and times in the grid, and how to change the format displayed on your graph.

Plotly’s date format is 'yyyy-mm-dd HH:MM:SS.ssssss'. You can enter this format directly, or depending on your data entry method, use our parsers to convert for you.

For our API users, we have guides for time series in MATLAB, Python, and R. If you’re using Python, we accept 'datetime.date' and 'datetime.datetime' formats. For plotly.js, we support JavaScript Date objects. Using MATLAB, you can specify the date format directly so our parser knows what to do. In R, we support R’s classes Date, POSIXlt and POSIXct in our ggplot2 to Plotly conversion.

Step 2

Entering dates and times in Plotly’s grid

To enter dates directly in the grid, you’ll need to use the format: yyyy-mm-dd HH:MM:SS.ssssss. Note that the hour must be a number between 00 and 23, with hours 12 through 23 reserved for PM. Your entry must include the four-digit year.

dateandtime

You can truncate the fractional seconds to any number of digits. All other truncations require you to keep entire fields. Here are a few common mistakes to avoid.

fractional seconds

Step 3

Importing files with dates and times

Uploading a data set into the grid from your computer, Google Drive, or Dropbox? Plotly will parse the data for you into our native format so you’re ready to customize your graph.

Date format and time series

Step 4

Custom formats for your graph

When you make a graph in Plotly with dates and times, the default labeling picks spacing that fits the graph. Here our dates included both year and month, but as you can see, Plotly displays years on the x axis.

Date format and time series

Step 5

Custom formats for your graph

To customize, we select AXES in the toolbar. In the popover, select the axis you wish to modify.

Date format and time series

Select the Labels tab to reveal options for a Custom date format and Hover format. We use the time format here (see the table below for some of the most used examples). For example, in Custom date format, '%b %Y' tells Plotly to display an abbreviated month and the year with century.One extra option: '%{n}f' allows you to show fractional seconds, where 'n' tells us the number of digits to include.

Date format and time series

The Hover format, '%B %Y', tells Plotly to show the full month name and year with century when using the hover feature to explore the data.

Date format and time series

To change the number of values displayed on the time axis, use the Ticks tab in the AXES popover. Pick a 'Max #' of dates to display, and Plotly automatically finds the greatest lower bound to be evenly spaced along the axis.

Date format and time series

If you don’t specify any Custom date format, Plotly will choose the format depending on your zoom level. As your viewer zooms in, new levels of detail will be included on the x axis.

Date format and time series

Some common date and time formats are included in the table below. Can’t find what you’re looking for? Try here.

Date format and time series 1

Date format and time series 2

Date format and time series 3

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.