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