# chartjs-adapter-date-fns

> Chart.js adapter to use date-fns for time functionalities

Latest version **3.0.0** (published 2022-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-adapter-date-fns
pnpm add chartjs-adapter-date-fns
yarn add chartjs-adapter-date-fns
bun add chartjs-adapter-date-fns
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-12-11 |
| First published | 2019-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 280.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 122 |
| Maintainers | chartjs-ci |
| Keywords | chart.js, date, date-fns, time |

## Links

- npm: https://www.npmjs.com/package/chartjs-adapter-date-fns
- Repository: https://github.com/chartjs/chartjs-adapter-date-fns
- Homepage: https://www.chartjs.org
- Issues: https://github.com/chartjs/chartjs-adapter-date-fns/issues
- npm.io page: https://npm.io/package/chartjs-adapter-date-fns

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2022-12-11
- 1.1.0-beta.1 (next) — 2021-03-07
- 2.0.1 — 2022-11-16
- 2.0.0 — 2021-04-02
- 1.1.0-alpha.3 — 2020-07-21
- 1.1.0-alpha.2 — 2020-07-21
- 1.1.0-alpha — 2020-04-12
- 1.0.0 — 2020-01-15
- 1.0.0-alpha4 — 2020-01-15
- 1.0.0-alpha3 — 2019-11-18
- 1.0.0-alpha2 — 2019-11-18
- 1.0.0-alpha1 — 2019-05-10
- 0.1.2 — 2019-05-09
- 0.1.1 — 2019-04-12
- 0.1.0 — 2019-03-04

## README

# chartjs-adapter-date-fns

[![release](https://img.shields.io/github/release/chartjs/chartjs-adapter-date-fns.svg?style=flat-square)](https://github.com/chartjs/chartjs-adapter-date-fns/releases/latest) [![travis](https://img.shields.io/travis/chartjs/chartjs-adapter-date-fns.svg?style=flat-square&maxAge=60)](https://travis-ci.org/chartjs/chartjs-adapter-date-fns) [![awesome](https://awesome.re/badge-flat2.svg)](https://github.com/chartjs/awesome)

## Overview

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

Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.8.0** or later and [date-fns](https://date-fns.org/) **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

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

```javascript
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](https://www.jsdelivr.com/features) to always specify a version in order to avoid breaking changes. This can be achieved by appending `@{version}` to the url:

```html
<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](http://www.jsdelivr.com/).

## 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](https://www.chartjs.org/docs/next/axes/cartesian/time#date-adapters)

For example:

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


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

Further, read the [Chart.js documentation](https://www.chartjs.org/docs/next) for other possible date/time related options. For example, the time scale [`time.*` options](https://www.chartjs.org/docs/next/axes/cartesian/time#configuration-options) can be overridden using the [date-fns tokens](https://date-fns.org/docs/format).

## Development

You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):

```bash
> npm install
```

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

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

## License

`chartjs-adapter-date-fns` is available under the [MIT license](LICENSE.md).

---
_Source: https://npm.io/package/chartjs-adapter-date-fns · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._