chartjs-adapter-dayjs-4-tz

Overview

This fork of chartjs-adapter-dayjs-4 enables the use of the Day.js date library with timezone support for Chart.js time-scale charts.

Timezone support ensures that time labels and major ticks on the time-scale axis are displayed correctly according to the configured timezone whenever its UTC offset differs from the system's default timezone.

Note: Requires Chart.js 4.5.0 or later and Day.js 1.11.18 or later.

Installation

NPM

npm i dayjs chartjs-adapter-dayjs-4-tz

Javascript imports

import Chart from 'chart.js';
import 'chartjs-adapter-dayjs-4-tz';

Configuration

The target timezone should be set in the adapters.date.tz property of the time-scale axis. If adapters.date.tz is not set, the system's default timezone is used.

The following configuration example defines a time Cartesian axis that generates hourly ticks and marks the beginning of each day as a major tick according to the timezone of Helsinki (EET/EEST):

options: {
  scales: {
    x: {
      type: 'time',
      adapters: {
        date: {
          tz: 'Europe/Helsinki'
        }
      },
      time: {
        isoWeekday: true,
        unit: 'hour',
        displayFormats: {
            day: 'D.M.',
            hour: 'HH'
        }
      },
      ticks: {
        maxRotation: 0,        
        major: { enabled: true },
      },
      grid: {
        color: ctx => ctx.tick?.major ? '#666' : '#222',
      }
    },      
    y: {...}
  }
}

• Major ticks are labeled using Day.js format D.M. (day and month)
• Hourly ticks labeled using Day.js format HH (hour in 24-hour format)
• Tick label text is not rotated (maxRotation: 0)
• Vertical grid lines are colored #666 on major ticks, otherwise #222
• Major ticks have priority when Chart.js decides which ticks to display depending on the available chart width

See the Chart.js documentation for all configurable options. The time formatting options support Day.js formats.

License

chartjs-adapter-dayjs-4-tz is available under the MIT license.

Credits

Source code for the original chart-js-adapter-dayjs-4 adapter:

• Jiewei Cheong

Source code for chartjs-adapter-moment adapter:

• Ben McCann
• Evert Timberg
• stockiNail