Vue Timeline Chart

Appearance

Timestamps and scale ​

Timestamps ​

The timestamps that are displayed on the top of the timeline will snap to a certain unit of time, depending on the zoom level and some other factors.

The minTimestampWidth prop sets a minimum width to prevent overlapping timestamps.

minTimestampWidth: (100)

1900
1970
2000
Zoom in and out to see the scale change

INFO

Which timestamps are displayed is determined by:

  1. The maximum amount of timestamps in view (automatically calculated by taking the container width and dividing it by the minTimestampWidth prop)
  2. The possible scales to snap to.

Scales ​

The interval between the timestamps and which unit of time is being used, is internally called a scale.

By default, the timestamps will snap to the scales below.

The scales prop allows you to overwrite them.

ts
{
  // every 1 second or 10 seconds
  unit: 'seconds',
  steps: [1, 10],
},
{
  // every 15 seconds, 30 seconds, 1 minute, 5 minutes, etc.
  unit: 'minutes',
  steps: [.25, .5, 1, 5, 10],
},
{
  // every 15 minutes, 30 minutes, 1 hour, 2 hours
  unit: 'hours',
  steps: [.25, .5, 1, 2],
},
{
  // every day
  unit: 'days',
  steps: [1],
},
{
  // every 7 days, every month, every other month
  unit: 'months',
  steps: [.25, 1, 2],
},
{
  // every year, 5 years, 10 years, etc.
  unit: 'years',
  steps: [1, 5, 10, 25, 50, 100, 250, 500, 1000],
},

IMPORTANT

The calculation for steps is done by taking the timestamp and doing a modulo operation with the unit in milliseconds.

The time values (ms, seconds, minutes, hours, years) are evenly distributed and easy to do calculations with, so here the steps property is intuitive.

However, days and months are based on the calendar, e.g. days will snap to the start of every day and months will snap to the start of every month.

Because of this, the modulo operation is only taking the dayOfMonth or monthOfYear into account, which might create some gaps (e.g. between May 30th and June 2nd when using a step of 2).