dateTimeFormatOptions

The dateTimeFormatOptions property allows you to customize the list of date format options available on the dashboard and editor.

By default, Vizzly provides an extensive list of date and time format options for tables and chart axis preferences. Use this property if you'd like to customize the list of date and time format options or add additional values.

To customize the format of selected dates in date pickers use datePickerFormat.

<Vizzly.Dashboard
  // ...
  dateTimeFormatOptions={{
    __my_custom_date_format_option: { // Option ID
      formatter: date => dayjs(date).format('MM/DD/YYYY'), // Formatting function
      description: 'MM/DD/YYYY (US)', // Text shown in dropdowns
    },
  }}
/>

Default Options

dateTimeFormatOptions for Tables

dateTimeFormatOptions are used in the <Vizzly.Dashboard /> View Editor to control how dates are shown in Basic Tables and Pivot Tables. These options are accessed via the 'Format' tab.

dateTimeFormatOptions for Charts

dateTimeFormatOptions are used in the <Vizzly.Dashboard /> View Editor to control date and time axis formatting options. These options are accessed via the 'Format' tab.

Custom Values

Add additional date and time formatting options to tables and chart axis preferences by specifing custom option IDs in dateTimeFormatOptions. These will appear after default options in dropdown lists.

import Vizzly, { type VizzlyTheming } from '@vizzly/dashboard';
 
export function Dashboard() {
  return (
    <Vizzly.Dashboard
      // ...
      dateTimeFormatOptions={{
        "timezone": { // Custom Option ID
          formatter: date => dayjs.format(date, "z"), // Formatting function -> Output Example, 'BST'
          description: 'Timezone (Code)', // Text shown in dropdowns
        },
      }}
    />
  );
}

Overriding defaults

To change the default format of dates on the dashboard, you can provide a mapping from function to format using the defaultFormats function.