Vis js network - align label with one letter in node

Question

I have to align label with one letter (number) inside node using vis js network. As documentation says, there is font.align property inside node option and by default it's set to center. It looks nice when there are more than one letter in label:

However with one letter it looks like labels are aligned to the left:

Is it a bug or am I doing something wrong? If it's a bug, how can I get around it?

My full code (i'm using react-graph-vis version 1.0.5):

import React from 'react';
import Graph from "react-graph-vis";
import 'vis-network/styles/vis-network.min.css';

const ExecutionPathGraph = ({issueTraces}) => {

  const graph = {
    nodes: [
      { id: 1, label: "1"},
      { id: 2, label: "2"},
      { id: 3, label: "3"},
      { id: 4, label: "4"},
      { id: 5, label: "5"}
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]
  };

  const options = {
    height: '500px',
    nodes: {
      shape: 'circle',
      borderWidth: 0,
      color: '#000',
      font: {
        color: '#fff',
        size: 18,
        align: 'center'
      },
      shadow: true,
    },
    edges: {
      color: {
        color: '#F98323'
      },
      width: 1.5
    },
    layout: {
      hierarchical: {
        sortMethod: 'directed',
        shakeTowards: 'roots',
        direction: 'UD'
      }
    },
    interaction: {
      dragNodes: false,
      dragView: false,
      selectable: false,
      selectConnectedEdges: false,
      hover: false,
      hoverConnectedEdges: false,
      zoomView: false,
    },
    physics: false
  };

  return (
      <Graph
          graph={graph}
          options={options}
      />
  );
};

export default ExecutionPathGraph;

Answer 1

I ran into this same issue and have a really dumb solution: add an empty space before and after your number.

nodes: [
  { id: 1, label: " 1 "},
  { id: 2, label: " 2 "},
  { id: 3, label: " 3 "},
  { id: 4, label: " 4 "},
  { id: 5, label: " 5 "}

Answer 2

You can control text-alignment within node labels to be 'left' or 'center' as follows:

var nodes = [
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  {
    id: 3,
    label: "Node 3:\nLeft-Aligned",
    font: { face: "Monospace", align: "left" },
  },
  { id: 4, label: "Node 4" },
  {
    id: 5,
    label: "Node 5\nLeft-Aligned box",
    shape: "box",
    font: { face: "Monospace", align: "center" },
  },
];