chartjs-adapter-moment

What is chartjs-adapter-moment?

The chartjs-adapter-moment package is an adapter for Chart.js that allows you to use Moment.js for date manipulation and formatting. This is particularly useful for creating time-based charts where you need to handle dates and times efficiently.

What are chartjs-adapter-moment's main functionalities?

Date Formatting

This feature allows you to format dates on the x-axis of your Chart.js charts using Moment.js. The code sample demonstrates how to create a line chart with dates formatted as 'll' (localized date format).

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [{ x: '2023-01-01', y: 10 }, { x: '2023-01-02', y: 20 }]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'll'
        }
      }
    }
  }
});

Date Parsing

This feature allows you to parse dates using Moment.js before they are displayed on the chart. The code sample shows how to parse dates in 'YYYY-MM-DD' format and use them in a line chart.

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [{ x: moment('2023-01-01', 'YYYY-MM-DD'), y: 10 }, { x: moment('2023-01-02', 'YYYY-MM-DD'), y: 20 }]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          parser: 'YYYY-MM-DD'
        }
      }
    }
  }
});

Custom Time Units

This feature allows you to customize the time units displayed on the x-axis. The code sample demonstrates how to set the time unit to 'week' for a line chart.

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [{ x: '2023-01-01', y: 10 }, { x: '2023-01-02', y: 20 }]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'week'
        }
      }
    }
  }
});

Other packages similar to chartjs-adapter-moment

chartjs-adapter-date-fns

The chartjs-adapter-date-fns package is an adapter for Chart.js that allows you to use date-fns for date manipulation and formatting. It provides similar functionalities to chartjs-adapter-moment but uses date-fns, which is a lightweight alternative to Moment.js.

chartjs-adapter-luxon

The chartjs-adapter-luxon package is an adapter for Chart.js that allows you to use Luxon for date manipulation and formatting. Luxon is a modern JavaScript date library that offers a more comprehensive and immutable API compared to Moment.js.

README

chartjs-adapter-moment

Overview

This adapter allows the use of Moment.js with Chart.js. Moment.js is a very heavy library and thus not recommended for client-side development. However, it was previously the only library supported by Chart.js and so continues to be supported. You may prefer chartjs-adapter-date-fns for a minimal bundle size or chartjs-adapter-luxon for larger bundle size with additional functionality included such as i18n and time zone support.

Requires Chart.js 3.0.0 or later and Moment.js 2.0.0 or later. To use Chart.js v2.x, utilize v0.1.2 of the adapter.

Note: once loaded, this adapter overrides the default date-adapter provided in Chart.js (as a side-effect).

Installation

npm

npm install moment chartjs-adapter-moment --save

import { Chart } from 'chart.js';
import 'chartjs-adapter-moment';

CDN

By default, https://cdn.jsdelivr.net/npm/chartjs-adapter-moment returns the latest (minified) version, however it's highly recommended to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the URL:

<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

Read more about jsDelivr versioning on their website.

Configuration

Read the Chart.js documention for possible date/time related options. For example, the time scale time.* options can be overridden using the Moment formats.

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> gulp build            // build dist files
> gulp build --watch    // build and watch for changes
> gulp lint             // perform code linting

License

chartjs-adapter-moment is available under the MIT license.