RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jkmnt/chartjs-scale-timestack below:

jkmnt/chartjs-scale-timestack: Alternative time axis for Chart.js. Formats time for humans

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/luxon@3.4.4/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].timestack

Name Default Description datetime {} Luxon DateTime creation options (zone, locale, etc) density 0.5 Desired labels density [0..1]. Defined as total labels width / scale width max_density 0.75 Maximum labels density [0..1] tooltip_format something sane Tooltip format options (Intl.DateTimeFormatOptions) left_floating_tick_thres 0.33 (first 1/3 of scale width) Add left bottom tick with ellipsis if there are no bottom ticks in first [thres * axis_width] part of scale. Set false to disable the feature right_floating_tick_thres false Add right bottom tick with ellipsis if there are no bottom ticks in last [thres * axis_width] part of scale. Set false to disable the feature make_tick_generators Factory function returning array of tick generators to replace the default ones. Would be called just once at chart creation format_style Formatting options (Intl.DateTimeFormatOptions) to customize the default tick generators format style. i.e. {hour12: true, month: 'long', minute: '2-digit'} etc

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4