chartjs-adapter-date-fns

What is 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. This package is particularly useful for handling time series data in Chart.js, providing a seamless way to format dates and times on your charts.

What are chartjs-adapter-date-fns's main functionalities?

Date Formatting

This feature allows you to format dates on the x-axis of a Chart.js chart using date-fns. The code sample demonstrates how to set up a line chart with dates parsed and formatted using date-fns.

const Chart = require('chart.js');
const dateFns = require('date-fns');
const adapter = require('chartjs-adapter-date-fns');

const config = {
  type: 'line',
  data: {
    labels: [
      dateFns.parseISO('2023-01-01'),
      dateFns.parseISO('2023-02-01'),
      dateFns.parseISO('2023-03-01')
    ],
    datasets: [{
      label: 'Sample Data',
      data: [10, 20, 30]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month'
        }
      }
    }
  }
};

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);

Custom Date Parsing

This feature allows you to use custom date parsing logic with date-fns. The code sample shows how to set up a line chart where the dates are parsed using a custom parser function that utilizes date-fns.

const Chart = require('chart.js');
const dateFns = require('date-fns');
const adapter = require('chartjs-adapter-date-fns');

const config = {
  type: 'line',
  data: {
    labels: [
      '2023-01-01',
      '2023-02-01',
      '2023-03-01'
    ],
    datasets: [{
      label: 'Sample Data',
      data: [10, 20, 30]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          parser: date => dateFns.parseISO(date),
          unit: 'month'
        }
      }
    }
  }
};

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, config);

Other packages similar to chartjs-adapter-date-fns

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. It provides similar functionalities to chartjs-adapter-date-fns but uses Moment.js instead of date-fns. Moment.js is known for its comprehensive date and time manipulation capabilities, but it is larger in size compared to date-fns.

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 date-fns. It is also known for its better support for time zones and internationalization.

README

chartjs-adapter-date-fns

Overview

This adapter allows the use of date-fns with Chart.js.

Requires Chart.js 2.8.0 or later and date-fns 2.0.0 or later.

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

Installation

npm

npm install date-fns chartjs-adapter-date-fns --save

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

CDN

By default, https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns 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/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Read more about jsDeliver versioning on their website.

Configuration

Locale support via scale options

date-fns requires a date-fns locale object to be tagged on to each format() call, which requires the locale to be explicitly set via the adapters.date option: Chart.js documentation on adapters.date

For example:

// import date-fns locale:
import {de} from 'date-fns/locale';


// scale options:
{
    adapters: {
        date: {
            locale: de
        }
    }
}

Further, read the Chart.js documentation for other possible date/time related options. For example, the time scale time.* options can be overridden using the date-fns tokens.

Development

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

> npm install

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

> npm run build         // build dist files
> npm run lint          // perform code linting

License

chartjs-adapter-date-fns is available under the MIT license.