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

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { FC, Fragment } from 'react';
import { Axis, getAxisId, Position, timeFormatter, niceTimeFormatByDay } from '@elastic/charts';
import { getYRange } from './utils';
import { LineChartPoint } from '../../../../common/chart_loader';

const dateFormatter = timeFormatter(niceTimeFormatByDay(3));

interface Props {
  chartData?: LineChartPoint[];
}

// round to 2dp
function tickFormatter(d: number): string {
  return (Math.round(d * 100) / 100).toString();
}

export const Axes: FC = ({ chartData }) => {
  const yDomain = chartData !== undefined ? getYRange(chartData) : undefined;

  return (

{this.state.multi && (
            
          )}

changePropsBasedOnWidth = width => {
    const data1 = TIME_DATA.slice();
    const data2 = TIME_DATA_2.slice();
    let tooltipProps;
    let legendPosition = 'right';
    let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`;
    let xAxisFormatter = timeFormatter(niceTimeFormatByDay(1));
    let yAxisFormatter;
    let changeDescription =
      'At full width, you should be able to display all the details you need; axes, tick labels and titles, and legends.';

    if (width < 55) {
      legendPosition = 'bottom';
    }

    if (width < this.mediumSize) {
      const headerFormatter = tooltipData => {
        return `${formatDate(
          tooltipData.value,
          dateFormatAliases.shortDateTime
        )}`;
      };