I have a line chart built using Chart Js library. The Y-axis is showing date label while X-axis is showing the data. The raw date label is in this format '**YYYY-MM-DD**'. When I enter **Type: 'Time'** in Y-axis under scales in Javascript, the Y-axis automatically change to 'MM-DD' format.

When I include **time: {unit: 'day', displayFormats: {day: 'DD-MMM-YYYY'}}** in Y-axis to change the default date format, my line chart disappear. But if I don't include the above, the line chart re-appear. Can anyone share how i can convert it to **DD-MM-YYYY** date format for Y-axis? Thank you

```js
// setup 
    const data = {
      datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
    ]
    };
    // config 
    const config = {
      type: 'line',
      data,
      options: {
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true
          },
          y:{
            reverse: true,
            type: 'time',
            /*time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'DD-MM-YYYY'
                    }
                },*/ //Uncomment this part to test   
            ticks: {
              source: 'data',
              autoSkip: false
            }
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
```

```css
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.chartCard {
  width: 100vw;
  height: 100vh;
  background: rgba(255, 26, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 1200px;
  padding: 50px;
  border-radius: 20px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}

@media only screen and (min-width: 1600px) {
  .chartBox {
    width: 1600px;
  }
}
```

```html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Line Chart</title>
</head>

<body>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart" style="position: relative;"></canvas>
    </div>
  </div>
  <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </body>
    </html>
```