Formatting Duration

A duration formatter will format numeric value into duration format, which is mostly used on a duration-based value axis.

Available Codes

Each of the codes can repeated as many times as needed. If the actual number is shorter than a number of digits, it will be padded with zeros.

As a note, the codes are a subset of available Date formatting pattern codes.

IMPORTANT Codes are case-sensitive.

Code Meaning
y Years (a year is 365 days)
M Months (a month is 31 days)
w Weeks (a week is 7 days)
d Days (a day is 24 hours)
h Hours (an hour is 60 minutes)
m Minutes (a minute is 60 seconds)
s Seconds (a second is 1000 milliseconds)
S Milliseconds
a Special indicator that must always go after other codes. Indicates that absolute value should be used. (no minus sign)
' (single quote) Text enclosed in single quotes will be treated as text and will be displayed as is without parsing it for codes


Source value Base unit Format Output
61 second hh:ii:ss 00:01:01
1005 millisecond s.qqq 1.005
70 day m 'months' d 'days' 2 months 8 days

Styling output

Text formatting codes, like [bold], can be used to format chunks of outputed text . Please refer to "Formatting Strings" for more details.

Overriding format

As we saw in our introductory article on Formatters, you can override global or local durationFormat with a DurationFormatter data field function formatDuration().

series.tooltipText = "{valueY.formatDuration('mm:ss')}";
series.tooltipText = "{valueY.formatDuration('mm:ss')}";
"series": [{
  // ...
  "tooltipText": "{valueY.formatDuration('mm:ss')}"

Related content