how to show milliseconds in points in vis timeline in js

Question

Is there anyway that we can show milliseconds of vis timeline in points for ex: 0.2 instead to 200 and 0.00 istead of 000

Answer 1

The format of the time axis can be controlled with the format configuration option, this is described in this section of the documnetation. Full details on the supported formatting syntax can be found in the moment.js documentation. If the syntax you'd like isn't supported you can write your own function to complete the formatting.

From your description I believe you'd like to display in the format <second>.<fractional seconds>. This would be achieved with the millisecond format s.SSS.

An example options object for vis-timeline with this option set:

var options = {
  format: {
    minorLabels: {
      millisecond: 's.SSS',
    }
  }
};

Code snippet with this option set:

// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
  {id: 1, content: "item 1", start: "2022-07-20 13:52:10.001"},
  {id: 2, content: "item 2", start: "2022-07-20 13:52:10.250"},
  {id: 3, content: "item 3", start: "2022-07-20 13:52:11.100"},
  {id: 4, content: "item 4", start: "2022-07-20 13:52:10.000", end: "2022-07-20 13:52:10.900"},
  {id: 5, content: "item 5", start: "2022-07-20 13:52:10.800"},
  {id: 6, content: "item 6", start: "2022-07-20 13:52:10.990", type: "point"},
  {id: 7, content: "item 7", start: "2022-07-20 13:52:10.000", end: "2022-07-20 13:52:11.200"},
]);

// Configuration for the Timeline
var options = {
  format: {
    minorLabels: {
      millisecond: 's.SSS',
    }
  }
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

body,
html {
  font-family: sans-serif;
}

<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<div id="visualization"></div>