Chartjs-Convert date label on Y-axis Line Chart to specific date format

by

0👍

Update your date format using dd instead of DD, also for year format.

Then, time configuration will look like this:

                time: {
                    displayFormats: {
                        day: 'dd-MM-yyyy',
                    },
                },

0👍

As the errors in the console state your formatting is incorrect, day and year require lowerCase letter:

day: 'dd-MM-yyyy'

// 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
);
* {
  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;
  }
}
<!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>

Leave a comment