chartjs-scale-timestack v1.0.1

chartjs-scale-timestack

Overview

This custom scale adds the new timestack axis to Chart.js.

Timestack formats time in two stacked rows. Top row shows the fine ticks while bottom row shows the context. Timestack tries hard to choose the ticks looking nice for humans, i.e. 14:00, 14:30, 15:00, 15:30 in hourly view and 1, 5, 10, 15, 25 days of the month in daily view.

Demo

Installation

Timestack internally uses Luxon for locale-aware time formatting.

npm

npm install luxon chartjs-scale-timestack --save

import { Chart } from 'chart.js';
import 'chartjs-scale-timestack';

Usage

new Chart(ctx, {
  options: {
    scales: {
      x: {
        type: 'timestack',
      },
    },
  },
  ...
});

Note:

• The dataset points must be in {x, y} format with millisecond timestamps. X-values are not parsed.

  const dataset = {
    data: [
        {x: 1711537965000, y: 1},
        {x: 1711537973000, y: 2},
        ...
    ]
  }

• X-values as labels are not supported. Use stock time scale for these.

• Bar charts with offset gridlines are not supported. Use time scale for these too.
• Custom tick formatting callback is ignored.
• Using rotated ticks is not recommended. Timestack sets maxTickRotation = 0 by default.
• Ticks autoSkip options are not respected. Timestack bypasses the autoSkip algorithm.
• ticks.maxTicksLimit is respected. Timestack will ignore the ticks sequences violating it.

Options

Namespace: options.scales[id].timescale