chartjs-adapter-dayjs-4

chartjs-adapter-dayjs-4 is a drop-in date adapter that connects Chart.js v4’s time scale to Day.js, giving charts accurate date parsing, formatting, and interval calculations without pulling in a heavier date library like Moment or Luxon.

It overrides Chart.js’s internal _adapters._date implementation with Day.js-backed parse, format, add, diff, startOf, and endOf functions, and ships with several Day.js plugins pre-extended (custom parse formats, quarters, ISO weeks, and localized display formats), so time-axis charts work correctly out of the box.

What You Get

• Drop-in Chart.js v4 support - Registers a Day.js-backed date adapter the moment you import it, with no extra configuration required.
• Preloaded Day.js plugins - Ships with AdvancedFormat, QuarterOfYear, LocalizedFormat, CustomParseFormat, and isoWeek already extended.
• Full time-scale coverage - Implements parse, format, add, diff, startOf, and endOf so every Chart.js time-axis operation works correctly.
• Sensible default formats - Provides ready-made display formats for every Chart.js time unit, from millisecond up to year and quarter.

Common Use Cases

• Real-time dashboards - Rendering time-series data (metrics, IoT sensor readings, financial ticks) on Chart.js time-scale axes.
• Custom date format ingestion - Parsing timestamps in non-standard string formats using Day.js’s customParseFormat plugin.
• Localized reporting charts - Displaying dates and times in a viewer’s locale using Day.js’s localized format plugin.
• Quarterly/fiscal reporting charts - Grouping and labeling time-scale data by quarter for financial or business reporting dashboards.

Under The Hood

Architecture The library is a single side-effecting module (src/index.ts) that, on import, calls Chart.js’s _adapters._date.override(...) to replace the global date adapter used by every time-scale axis. There is no internal layering, no exported API surface, and no configuration object — the entire behavior is one object literal implementing parse, format, add, diff, startOf, and endOf against a shared Day.js instance extended with several plugins. Because registration is global and side-effect based, any change to this override affects every Chart.js time-axis chart in the consuming application simultaneously.

Tech Stack Written in TypeScript and built with tsdx (a zero-config wrapper around Rollup, Babel, ESLint, and Jest), producing CommonJS and ESM bundles plus type declarations. Bundle size is tracked via size-limit against 10KB budgets for both output formats. Tooling includes ESLint with TypeScript and unicorn plugins, Prettier, and Husky pre-commit hooks running lint-staged formatting; the package uses Yarn Berry (.yarnrc.yml, .yarn/) for dependency management. Peer dependencies are chart.js (>=4.0.1) and dayjs (^1.9.7), kept external rather than bundled.

Code Quality Test coverage is effectively absent: the sole test file imports a sum helper that does not exist anywhere in src/index.ts, indicating a leftover tsdx template test that was never adapted to the adapter’s actual logic. Type safety is partial — several function signatures (parse, add, startOf) fall back to any for the time/value parameters rather than using Chart.js’s own typed helpers throughout. Error handling is minimal but appropriate for the domain: invalid dates are checked via Day.js’s isValid() and coerced to null rather than throwing.

API Design The adapter has effectively zero public API of its own — consumers import it once for its side effect and then configure everything through Chart.js’s own time.* scale options and Day.js’s plugin ecosystem, which keeps integration boilerplate very low. The tradeoff is discoverability: the README is a few short paragraphs that defer entirely to Chart.js’s documentation for configuration, so anything adapter-specific (which plugins are preloaded, the default format strings, the isoWeek weekday handling) has to be learned by reading the source rather than the docs.