Formatting Dates, Time Series, and Timestamps

Dates and Times in Chart Studio

Step 1

Dates, Time Series and Timestamp Format in Chart Studio

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.

Chart Studio’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 Chart Studio conversion.

Step 2

Entering Dates and Times in Chart Studio’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, or an online repository? Chart Studio 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 Format

When you make a graph in Chart Studio with dates and times, the default labelling picks spacing that fits the graph. Here the dates included year, month, and day, but Chart Studio displays month and year by default.

Date format and time series

To customize date format, from 'Axes' under 'Style' menu choose 'Tick Labels' submenu. Next, select the axis you wish to modify, and then set 'advanced(d3-time-format)' for 'Label Format' attribute. A text box will appear where you can enter a custom time format.

Date format and time series

In 'Label Format', '%b %Y' tells Chart Studio 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.

To change the number of values displayed on the time axis, use the 'Axes' under the 'Style' menu. Then from 'Tick Label' sub menu, pick a 'Max Number of Labels' of dates to display. Chart Studio 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, Chart Studio 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.

Table