Get started with chartjs-adapter-date-fns CDN

MIT licensed

Chart.js adapter for Date-Fns library, enabling Date-Fns formatting in Chart.js datasets.

Tags:
  • chart.js
  • date-fns
  • date
  • time

Stable version

Copied!

How to start using chartjs-adapter-date-fns CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with chartjs-adapter-date-fns CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
  <script src="https://cdn.cdnhub.io/chartjs-adapter-date-fns/3.0.0/chartjs-adapter-date-fns.min.js"></script>
  <script src="https://unpkg.com/date-fns@2.29.3/esm/index.js"></script>
  <style>
    #myChart {
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const labels = [];
    const data = [];

    // Generate some random data with dates
    for (let i = 0; i < 30; i++) {
      const date = new Date();
      date.setDate(date.getDate() + i);
      labels.push(new Date(date).toLocaleDateString());
      data.push(Math.floor(Math.random() * 100));
    }

    new Chart(ctx, {
      type: 'line',
      data: {
        labels,
        datasets: [{
          label: 'Random Data',
          data,
          borderColor: 'rgba(75, 192, 193, 1)',
          fill: false
        }]
      },
      options: {
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day'
            },
            adapter: new AdapterDateFns()
          },
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>
Copied!

All versions