Search code examples
vis.jsvis.js-network

Vis.js - set graph label's font as underline


I use vis.js to display a graph. I want to use markup on the node's label. I'm using a node of type text.

What I did:

I set font option in the node option:

// in the option object
nodes: {
    type: 'text'
    font: {
        multi: 'html',
    }
}

And I added the <u> tag to my label

// in the option object or node data object
label: `<u>${YourLabel}</u>`

Result: My label is displayed with the <u> tag on the graph. As mentioned in this post, this works for <b> and <i>.

Is <u> not supported ?


Solution

  • According to issue 3119 in the old vis.js, only <b>, <i> and <code> is supported:

    With respect to HTML, the following is possible: Set option node.font.multi: html. This allows you to use the <b>, <i> and <code> tags within the label text for formatting.

    In the current version of vis.js, it looks like that is still the case - from LabelSplitter.js:

    // Hash of prepared regexp's for tags
    var tagPattern = {
      // HTML
      '<b>': /<b>/,
      '<i>': /<i>/,
      '<code>': /<code>/,
      '</b>': /<\/b>/,
      '</i>': /<\/i>/,
      '</code>': /<\/code>/,
      // Markdown
      '*': /\*/,  // bold
      '_': /\_/,   // ital
      '`': /`/,   // mono
      'afterBold': /[^\*]/,
      'afterItal': /[^_]/,
      'afterMono': /[^`]/,
    };
    

    Styling node content with SVG (where <u> can work) is shown here but there are warnings about browser support and this formats node content, not the node label.