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

Timestack internally uses Luxon for locale-aware time formatting.

npm install luxon chartjs-scale-timestack --save

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

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-scale-timestack/dist/chartjs-scale-timestack.min.js"></script>

Timestack functions are exposed via global _timestack object.

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 skip the ticks sequences violating it.

Namespace: options.scales[id].timescale