Sometimes you want different date & time formats than the default ones. You can override the default formats by providing a custom formatters using chartReactConfig.
Example
DateFormattersConfig dateInput `DMY` or NA standart `MDY` DateFormatType toString Returns a string representation of a string. () => string charAt Returns the character at the specified index. (pos: number) => string charCodeAt Returns the Unicode value of the character at the specified location. (index: number) => number concat Returns a string that contains the concatenation of two or more strings. (...strings: string[]) => string indexOf Returns the position of the first occurrence of a substring. (searchString: string, position?: number) => number lastIndexOf Returns the last occurrence of a substring in the string. (searchString: string, position?: number) => number localeCompare Determines whether two strings are equivalent in the current locale.
Determines whether two strings are equivalent in the current or specified locale. { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; } match Matches a string with a regular expression, and returns an array containing the results of that search.
Matches a string or an object that supports being matched against, and returns an array
containing the results of that search, or null if no matches are found. { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; } replace Replaces text in a string, using a regular expression or search string.
Passes a string and {@linkcode replaceValue} to the `[Symbol.replace]` method on {@linkcode searchValue}. This method is expected to implement its own replacement algorithm.
Replaces text in a string, using an object that supports replacement within a string. { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { ...; }, replaceValue: string): string; (searchValue: { ...; }, replacer: (substring: string, ...args: any[]) => string): string; } search Finds the first substring match in a regular expression search. { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; } slice Returns a section of a string. (start?: number, end?: number) => string split Split a string into substrings using the specified separator and return them as an array. { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; } substring Returns the substring at the specified location within a String object. (start: number, end?: number) => string toLowerCase Converts all the alphabetic characters in a string to lowercase. () => string toLocaleLowerCase Converts all alphabetic characters to lowercase, taking into account the host environment's current locale. { (locales?: string | string[]): string; (locales?: LocalesArgument): string; } toUpperCase Converts all the alphabetic characters in a string to uppercase. () => string toLocaleUpperCase Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale. { (locales?: string | string[]): string; (locales?: LocalesArgument): string; } trim Removes the leading and trailing white space and line terminator characters from a string. () => string length Returns the length of a String object. number substr Gets a substring beginning at the specified location and having the specified length. (from: number, length?: number) => string valueOf Returns the primitive value of the specified object. () => string codePointAt Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point
value of the UTF-16 encoded code point starting at the string element at position pos in
the String resulting from converting this object to a String.
If there is no element at that position, the result is undefined.
If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos. (pos: number) => number includes Returns true if searchString appears as a substring of the result of converting this
object to a String, at one or more positions that are
greater than or equal to position; otherwise, returns false. (searchString: string, position?: number) => boolean endsWith Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
endPosition – length(this). Otherwise returns false. (searchString: string, endPosition?: number) => boolean normalize Returns the String value result of normalizing the string into the normalization form
named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms. { (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string; (form?: string): string; } repeat Returns a String value that is made from count copies appended together. If count is 0,
the empty string is returned. (count: number) => string startsWith Returns true if the sequence of elements of searchString converted to a String is the
same as the corresponding elements of this object (converted to a String) starting at
position. Otherwise returns false. (searchString: string, position?: number) => boolean anchor Returns an `<a>` HTML anchor element and sets the name attribute to the text value (name: string) => string big Returns a `<big>` HTML element () => string blink Returns a `<blink>` HTML element () => string bold Returns a `<b>` HTML element () => string fixed Returns a `<tt>` HTML element () => string fontcolor Returns a `<font>` HTML element and sets the color attribute value (color: string) => string fontsize Returns a `<font>` HTML element and sets the size attribute value { (size: number): string; (size: string): string; } italics Returns an `<i>` HTML element () => string link Returns an `<a>` HTML element and sets the href attribute value (url: string) => string small Returns a `<small>` HTML element () => string strike Returns a `<strike>` HTML element () => string sub Returns a `<sub>` HTML element () => string sup Returns a `<sup>` HTML element () => string padStart Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the start (left) of the current string. (maxLength: number, fillString?: string) => string padEnd Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length.
The padding is applied from the end (right) of the current string. (maxLength: number, fillString?: string) => string trimEnd Removes the trailing white space and line terminator characters from a string. () => string trimStart Removes the leading white space and line terminator characters from a string. () => string trimLeft Removes the leading white space and line terminator characters from a string. () => string trimRight Removes the trailing white space and line terminator characters from a string. () => string matchAll Matches a string with a regular expression, and returns an iterable of matches
containing the results of that search. (regexp: RegExp) => RegExpStringIterator<RegExpExecArray> __@iterator@2235 Iterator () => StringIterator<string> legend You can configure date format with a function {@link DateAggregationFormatterFunction}.
Function should return a pattern like `HH:mm` etc (all formats you can check in `date-fns` official docs) DateAggregationFormatterFunction events You can configure date format with a function {@link DateEventFormatterFunction}.
Function should return a pattern like `HH:mm` etc (all formats you can check in `date-fns` official docs) DateEventFormatterFunction
By default. DXcharts uses default DateTimeFormatter while working with dates. But be careful, this formatter is used not only to format XAxis labels but in a whole dxcharts-lite lib.
You can override default formatter by providing your own implementation:
After overriding default DateTimeFormatter, you should see new labels format:
