To show HTML content in Link label

GoJS
1

We want to display all the standard HTML tags content in Link label.

For example: In the subLabel property of Link array JSON,we are getting below text with tags.How to convert it as a formatted text.

subLabel: “Introduction:50% </ b ></ br > React Application:30% </ br> Skill:No”,

$(go.TextBlock,
{
textAlign: “center”,
font: “11px Segoe UI, Helvetica Neue, arial, sans-serif”,
background: “#f7f9fc”,
},
new go.Binding(“text”, “label”,subLabelConvertor))
),

function subLabelConvertor(edgeDataArray){
var subLabelText = edgeDataArray.subLabel;
const div = document.createElement(‘div’);
div.innerHTML = subLabelText;
console.log(“div toolHtml”,div)

    return div.innerHTML;
   
}
2

One cannot put any HTML “inside” any Node or Link, because GoJS uses a separate rendering system using either a Canvas or SVG.

But you could put HTML elements “in front” of any Node or Link. Here’s a sample where each Link has a what would normally be a regular GoJS link label – any non-Part GraphObject. Instead it creates an HTML element and adds and sizes the element at the appropriate position. As the user scrolls or zooms, each visible HTML label is updated as needed.

Because HTML DOM is so slow, those HTML link labels are also virtualized – they are only created when their corresponding Link midPoint would be in the viewport, and they are removed when they are scrolled out of the viewport.

The sample is at: Link Labels implemented with HTML elements The complete code is in the page itself.

3

This HTML link labels are not coming while exporting to png or pdf. How to attach the HTML labels again

4

Well, that is another basic problem with trying to use HTML within a diagram.

Are you just trying to render some marked-up text as the link label? If so, I suggest that you roll back all of the work you did trying to show HTML in front of the Diagram Div at the right places, and instead follow the technique used in this sample: