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

Question

I use vis.js to display a graph. I know we can update the node with:

nodes.update([{
  id: 1,
  font: {
    color: "#0d8"
  }
}]);

However, I can't update the font weight, for example, with font.bold: true.

I've also tried to use font.multi, but no luck.

Can you show how to set existing label as bold? (potentially as normal back too)

Bombacaceous

Have you succeeded using DongBin Kim's answer? See also my comment to it – Seena

Remember that setting font.bold to true is not how it is supposed to be used: this option is to change the font of <b> elements inside the label, not to enable bold (font.multi: "html" does that) – Seena

Answer 1

You need to combine a couple of options to make it work.

A. Set font option in node option:

// in the option object
nodes: {
    font: {
        // required: enables displaying <b>text</b> in the label as bold text
        multi: 'html',
        // optional: use this if you want to specify the font of bold text
        bold: '16px arial black'
    }
}

B. Add html element in the label option:

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

So basically, you only need to specify the multi property as html and add <b> element in the label property with your label text.

Chemoreceptor

I've fixed the missing comma in you answer; for me it works with just font:{ multi: "html" } (and <b>...</b> in label) though – Seena

@Seena As I mentioned, you only need to specify multi property and label property with <b> element. But if you want a specific bold style, you could add the bold property as above. – Chemoreceptor

right, I've missed the comment in the code. If you don't object, I'll change the order of options to indicate the first one is required and the comments to improve readability for quick lookup – Seena

@Seena I appreciate your feedback! That sounds reasonable :) – Chemoreceptor

hi.. do you know how to embed material design icon such <i class='mdi mdi-star'></i>? – Gynaeceum

Answer 2

var options = {axisFontSize = 30} and then pass to the graph object

Eos