How to add your own date format

Dates can be tricky.

Sometimes, Flourish picks up on your data being in a date format and will interpret it accordingly. This will allow you to do lots of useful things, like reducing the number of tick marks to simplify your axes or displaying your dates in a different format than they are input in your dataset. Unfortunately, not all date formats are understood by Flourish, though.

Let's take the below example:

The dates in our example aren't being interpreted as dates, but as categories. This means we can't declutter our X axis to make our chart more performant or display our dates in a shorter syntax. 

Luckily, there is a trick you can apply to help Flourish understand your date format. To do this:

1

Go to the date formatting settings and select Date/time if it is a date or a time. If Flourish is able to recognize your dates, they should display in your X axis. If Flourish can't recognize your dates, your tick labels will read Arbitrary string.

2

Select your date format from the dropdown. If it is not there, you will have to add the syntax for it manually, in d3-time-format syntax. For our example above (01 April 2020), you can supply it like this: %d %B %Y.

Here are some other examples of the syntax you will need for certain date formats:

1955 Q2	%Y Q%q
01/03/2020	%d/%m/%Y
Jul 5	%b %d
February 1928	%B %Y
Aug-01	%b-%y
February 21, 2016	%B %d, %Y
4-Jan	%d-%b
1/26/2021 16:00:00	%m/%d/%Y %H:%M:%S
2019-4T	%Y-%qT

As you can see, each format has a slightly different format and is put together through several directives. 

Your format isn't displayed here? You can find the full documentation to create your date in d3-time-format syntax here.

3

If you've supplied your date format in the correct syntax, you should already see your chart update once you've input the date format

4

This will greatly improve the performance of your chart, as not each and every axis tick label is being drawn. It also allows you to supply a different format to display your dates than they are input in. To do this, supply the format you would like in the "Display format" area. If you leave it set to Auto, the display format will be the same as the input format (01 April 2020 – or  %d %B %Y – in our case).

Our improved chart looks like this: