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 = () => {<ChartReactAppdependencies={{...CREATE_MOCK_PROVIDERS(),// to override format on x-axis you need to use this config, since it's part of dxcharts-liteinitialChartConfig: {components: {xAxis: {formatsForLabelsConfig: {day_1: 'MM.dd',},},},},chartReactConfig: {// DateFormattersConfig interfacedateFormatters: {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 = () => {<ChartReactAppdependencies={{...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 implementationcreateFormatterFunction: (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:
