How to create the chart with images and colours based on the level
Hi,
You can change style by level with ccs classes.
Inside each <li> tag you have a <div class="nodecontent levelx"> where x is level number.
So you can with CSS choose, a color or a backgtound by level.
CSS Examples :
.orgchart .level1 { background-color: #ec9ab4;}
.orgchart .level2 { background-color: #ecda9a;}
.orgchart .level3 { background-color: #d3ec9a;}
.orgchart .level4 { background-color: #9ae4ec;}
.orgchart .level5 { background-color: #9fec9a;}
.orgchart .level6 { background-color: #9aa4ec;}
.nodecontent:hover { background-color: greenyellow;}
RegardsSylvain
Hi Sylvain,
Thanks for your comment its working as I expected but I also want to add images to those nodes based on the database tables, like the image below.
Hi Mukesh,
Title and Content of each records can contain HTML tag like <img src='picture path or picture as base64'>
I my live demo with the OutSystems Database Samples I fill that in the Content node.
Regards
Since I am using a Reactive Web App I cant use the following code so do you have any other way for me.
Hi Mukesh,This componant is a Reactive Web componant, so this type of code works in a Reactive Web Application developed with the Service Studio.Can you be more explicit about your project?
But the binary to base function is not working in the module. I will share the OML file so could you check whats the problem.
Also when having the vertical level 3 or more it exceeds the width of the screen with a horizontal scroll so when I create a pdf it gets trimmed or if I use a new screen to create a pdf format with forge element it prints an empty screen. So can you also check that.