chartjs-adapter-intl

Introduction

chartjs-adapter-intl is a date adapter for Chart.js that uses the native Intl.DateTimeFormat API for date formatting and parsing.

Requires Chart.js 3.0.0 or later.

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

Installation

You can install this adapter via pnpm:

pnpm install chartjs-adapter-intl

via npm:

npm add chartjs-adapter-intl

via yarn:

yarn add chartjs-adapter-intl

CDN

By default, https://cdn.jsdelivr.net/npm/chartjs-adapter-intl 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/chartjs-adapter-intl"></script>

Read more about jsDelivr versioning on their website.

Usage

To use this adapter, you need to import it into your project. The adapter will automatically register itself with Chart.js.

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

const config = {
  type: 'line',
  data: {
    datasets: [{
      data: [
        { x: '2023-01-01T00:00:00Z', y: 10 },
        { x: '2023-01-02T00:00:00Z', y: 20 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      }
    }
  }
};

const myChart = new Chart(document.querySelector('#myChart'), config);

Configuration

This adapter supports the following configuration options:

• locale: The locale to use for formatting dates. Defaults to 'en-US'.

const config = {
  type: 'line',
  data: {
    datasets: [{
      data: [
        { x: '2023-01-01T00:00:00Z', y: 10 },
        { x: '2023-01-02T00:00:00Z', y: 20 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        adapters: {
          date: {
            locale: 'fr-FR'
          }
        },
        time: {
          unit: 'day'
        }
      }
    }
  }
};

const myChart = new Chart(document.querySelector('#myChart'), config);

Development

To build the project, run:

pnpm run build

To run tests, use:

pnpm test

License

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