javascript chart.js momentjs hammer.js chartjs-plugin-zoom

How to include adapters and plugins with ChartJS

What is the most up to date (ES6) and minimal way to use Chart.js with time series data (requiring an adapter like moment.js) and zoom/pan capabilities (chartjs-plugin-zoom) using only CDN? Do you have to use require or import?

The code below will throw errors relating to missing functions that are coming from the other adapters and plugins.

var default_series = [1, 2, 3, 4, 5];
var default_time_series = [new Date()];

for (let i = 1; i < 5; i++)
{
    var tempDay = new Date(default_time_series[i - 1]);
        tempDay.setDate(tempDay.getDate() + 1);
      default_time_series.push(new Date(tempDay.valueOf()));
}

const default_chart_dataset = {
        data: [],
        label: 'Default',
        borderColor: '#000000',
        fill: false,
        hidden: false,
        spanGaps: false,
        pointRadius: 0
};

var chart_data = {
    type: 'line',
    data: {
        labels: [],
        datasets: []
    },
    options: {
        title: {
            display: true,
            text: "A Chart"
        },
        scales: {
            x: {
                type: "time",
                time: {
                    // unit: 'day',
                    // tooltipFormat: 'MMM DD',
                    displayFormats: {
                        day: 'MMM DD YY'
                    }
                }
            }
        },
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true
                 },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x'
                }
            }
        }
    }
};

var main_chart = new Chart(document.getElementById('a-chart').getContext('2d'), chart_data);
main_chart.data.datasets.push({...default_chart_dataset});
main_chart.data.datasets[0].data = [...default_series];
main_chart.data.labels = [...default_time_series];
main_chart.update();

<html lang="en">
  <body>
    <canvas id="a-chart" class="a-graph" width="850" height="350"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>
  </body>
</html>

Solution

As stated in the documentation and migration guide since chart.js version 3 you will need to include a date adapter yourself.

Example:

var default_series = [1, 2, 3, 4, 5];
var default_time_series = [new Date()];

for (let i = 1; i < 5; i++) {
  var tempDay = new Date(default_time_series[i - 1]);
  tempDay.setDate(tempDay.getDate() + 1);
  default_time_series.push(new Date(tempDay.valueOf()));
}

const default_chart_dataset = {
  data: [],
  label: 'Default',
  borderColor: '#000000',
  fill: false,
  hidden: false,
  spanGaps: false,
  pointRadius: 0
};

var chart_data = {
  type: 'line',
  data: {
    labels: [],
    datasets: []
  },
  options: {
    title: {
      display: true,
      text: "A Chart"
    },
    scales: {
      x: {
        type: "time",
        time: {
          // unit: 'day',
          // tooltipFormat: 'MMM DD',
          displayFormats: {
            day: 'MMM DD YY'
          }
        }
      }
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          wheel: {
            enabled: true
          },
          pinch: {
            enabled: true
          },
          mode: 'x'
        }
      }
    }
  }
};

var main_chart = new Chart(document.getElementById('a-chart').getContext('2d'), chart_data);
main_chart.data.datasets.push({ ...default_chart_dataset
});
main_chart.data.datasets[0].data = [...default_series];
main_chart.data.labels = [...default_time_series];
main_chart.update();

<html lang="en">

<body>
  <canvas id="a-chart" class="a-graph" width="850" height="350"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.js"></script>
</body>

</html>