Skip to main content

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
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-lite 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: