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 ?
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.