How to use the @elastic/charts.timeFormatter function in @elastic/charts

<h4>
          
        </h4>
      
      
        
          
          
           Number(d).toFixed(0)}
            title={i18n.translate('xpack.uptime.monitorChart.checksChart.leftAxis.title', {
              defaultMessage: 'Number of checks',
              description: 'The heading of the y-axis of a chart of timeseries data',
            })}
          /&gt;

import { MetricsExplorerNoMetrics } from './no_metrics';

interface Props {
  intl: InjectedIntl;
  title?: string | null;
  onFilter: (query: string) => void;
  width?: number | string;
  height?: number | string;
  options: MetricsExplorerOptions;
  series: MetricsExplorerSeries;
  source: SourceQuery.Query['source']['configuration'] | undefined;
  timeRange: MetricsExplorerTimeOptions;
  onTimeChange: (start: string, end: string) => void;
}

const dateFormatter = timeFormatter(niceTimeFormatByDay(1));

export const MetricsExplorerChart = injectI18n(
  ({
    source,
    options,
    series,
    title,
    onFilter,
    height = 200,
    width = '100%',
    timeRange,
    onTimeChange,
  }: Props) => {
    const { metrics } = options;
    const handleTimeChange = (from: number, to: number) => {
      onTimeChange(moment(from).toISOString(), moment(to).toISOString());

description="The 'ms' is an abbreviation for milliseconds."
          />
        
      
      
        
          
          
           Number(d).toFixed(0)}
            title={i18n.translate('xpack.uptime.monitorCharts.durationChart.leftAxis.title', {
              defaultMessage: 'Duration ms',
            })}
          />
          {lineSeries}
        

defaultMessage="Pings over time"
          />

absoluteStartDate,
  absoluteEndDate,
  dangerColor,
  histogramSeries,
}: MonitorBarSeriesProps) => {
  const id = getSpecId('downSeries');

  return seriesHasDownValues(histogramSeries) ? (
    <div style="{{">
      
        
        
         [timestamp, down])}
          id={id}
          name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
            defaultMessage: 'Down checks',
          })}
          timeZone="local"
          xAccessor={0}
          xScaleType={ScaleType.Time}
          yAccessors={[1]}
          yScaleType={ScaleType.Linear}
        /&gt;
      
    </div>