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 |
Examples
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')}" ]}