Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

How to add html text to label text? #1936

Closed
KoNGoL opened this issue Jun 30, 2016 · 6 comments
Closed

How to add html text to label text? #1936

KoNGoL opened this issue Jun 30, 2016 · 6 comments

Comments

@KoNGoL
Copy link

KoNGoL commented Jun 30, 2016

I need to modify the label text so I can change the color for each line of the text. It is possible to achive? Adding some html or css text?

@mojoaxel
Copy link
Member

Please have a look at the customCss Example. Here the content includes html tags and css.

To change the color you could use css or something like this:

<ul>
  <li style="color:black;">line1</li>
  <li style="color:red;">line2</li>
  <li style="color:yellow;">line3</li>
</ul>

@KoNGoL
Copy link
Author

KoNGoL commented Jul 15, 2016

It doesn't work for me. This is what I try.
vis-html-example

And this is the vis options.

var optionsFA = {
                autoResize: true,
                height: '500px',
                layout: {
                    hierarchical: {
                        sortMethod: 'directed',
                        direction: 'RL',
                        levelSeparation: 250
                    }
                },
                nodes: {
                    shadow:true,
                    font: '12px arial black'
                },

                edges: {
                    width: 2,
                    shadow:true,
                    color: '#7f92a3',
                    smooth: {enabled: true,
                        roundness: 0.4}
                },

                groups: {
                    industry: {
                        shape: 'icon',
                        icon: {
                            face: 'FontAwesome',
                            code: '\uf275',
                            size: 50,
                            color: '#1e5eaf'
                        }
                    },
                    users: {
                        shape: 'icon',
                        icon: {
                            face: 'FontAwesome',
                            code: '\uf0c0',
                            size: 40,
                            color: '#1e5eaf'
                        }
                    },
                    supplier1: {
                        shape: 'icon',
                        icon: {
                            face: 'FontAwesome',
                            code: '\uf275',
                            size: 40,
                            color: '#1e5eaf'
                        }
                    },
                    supplier2: {
                        shape: 'icon',
                        icon: {
                            face: 'FontAwesome',
                            code: '\uf275',
                            size: 30,
                            color: '#1e5eaf'
                        }
                    },
                    supplier3: {
                        shape: 'icon',
                        icon: {
                            face: 'FontAwesome',
                            code: '\uf275',
                            size: 20,
                            color: '#1e5eaf'
                        }
                    }
                }
            };

And the nodes creation.

nodes.push({
                    id: company.IdEmpresa,
                    label: "<p>" + company.Nombre + "<br/>Inventario: " + currentInvetory + "</p>",
                    group: company.IdCliente == 0? "industry": "supplier1",
                    name: company.Nombre,
});
network = new vis.Network($('#networkContainer')[0], dataFA, optionsFA);

Any suggestions?

@mojoaxel
Copy link
Member

It looks like HTML-labels are not possible for network charts at the moment.

Simple multiline labels are possible: multilineText and disassemblerExample, but I could not find a way of changing colors inside a label.

I created a new Feature Request for that: #1965

@mojoaxel
Copy link
Member

@KoNGoL Can we close this issue? CSS in Labels is just not possible at the moment.

@mojoaxel
Copy link
Member

mojoaxel commented Dec 2, 2016

(kind of) implemented by @eymiha with #2385

@shoabshah
Copy link

It looks like HTML-labels are not possible for network charts at the moment.

Simple multiline labels are possible: multilineText and disassemblerExample, but I could not find a way of changing colors inside a label.

I created a new Feature Request for that: #1965

Is it Sill (Apr - 2019) not possible??

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants