Date format

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

const ChartApp = () => {
    <ChartReactApp
        dependencies={{
            ...CREATE_MOCK_PROVIDERS(),
            // to override format on x-axis you need to use this config, since it's part of dxcharts-lite
            initialChartConfig: {
                components: {
                    xAxis: {
                        formatsForLabelsConfig: {
                            day_1: 'MM.dd',
                        },
                    },
                },
            },
            chartReactConfig: {
                // DateFormattersConfig interface
                dateFormatters: {
                    legend: () => 'MM.dd.yyyy',
                    events: () => 'MM.dd.yyyy',
                    dateInput: 'MDY',
                },
            },
        }}
    />;
}

DateFormattersConfig

Property

Description

Type

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@2236

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

Custom date format

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:

const ChartApp_2 = () => {
    <ChartReactApp
        dependencies={{
            ...CREATE_MOCK_PROVIDERS(),
            // to override format on x-axis you need to use this config, since it's part of `dxcharts-lite`
            initialChartConfig: {
                dateFormatter: {
                    // formatter works with pattern string like "HH.mm.ss" => "12:46:33",
                    // this is an example, and you can write here your own implementation
                    createFormatterFunction: (pattern: string) => (dateTimestamp: number) => {
                        const date = new Date(dateTimestamp);
                        const hour = date.getHours();
                        const minute = date.getMinutes();
                        const seconds = date.getSeconds();
                        const day = date.getDay();
                        const month = date.getMonth();
                        const year = date.getFullYear();
                        const formattedDate = pattern
                            .replace('yyyy', `${year}`)
                            .replace('yy', `${year}`)
                            .replace('MM', month < 10 ? `☢0${month}` : `☢${month}`)
                            .replace('MMM', month < 10 ? `☢0${month}` : `☢${month}`)
                            .replace('dd', day < 10 ? `↗0${day}` : `↗${day}`)
                            .replace('HH', hour < 10 ? `☀0${hour}` : `☀${hour}`)
                            .replace('mm', minute < 10 ? `☔0${minute}` : `☔${minute}`)
                            .replace('s', seconds < 10 ? `☘0${seconds}` : `☘${seconds}`);
                        return formattedDate;
                    },
                },
            },
        }}
    />;
}

After overriding default DateTimeFormatter, you should see new labels format: