Change color of Sunburst / Treemap in Maps

Hi Konstantin,

Thanks for the fast answer! Is it possible to apply this to maps differently? For example, can I have two otherwise identical sunbursts and in one use the normal colors and in the other use my own predefined colors, or is this a global change?

Thanks! Brennan

Hi Brennan,
I'm afraid this is a global change as the header file mentioned in the post before is included in the whole web interface and the objects changed in the header are also the same in the whole interface. So no separation is possible. Sorry.
Best regards

Is there a way to only set the parent color only to the member color when all members are the same color. Setting the parent to the least severe rather than the most severe.

I don't want the root color to change to 'red', for example, unless all the members are 'red'. If any is green it should remain green.

In the way we have arranged the tree structure, if any member is good then the parent is good. If all members are red (or yellow) then the parent is also in that state.

This allows is to visualize when there is an outage, which would be when all paths/members are down.

more complex would be to to have the parent turn yellow if any member is yellow or red. If all members are red, the parent is red. This would show a degraded level at the parent level.

Hoping this is a simple setting someplace.. Oh the starburst is incredible way to present lots of information up in an organized way. Thanks.

I'm afraid that isn't possible. Sorry.

Hi guys,

Well after working through some issues with permissions, I was finally able to put these color changes in the htmlheader_customer.htm file. Doesn't seem to have changed anything on the web side, but on the enterprise console I sometimes see the code displayed when I click on libraries or maps (very top... before my own maps...

.treemap .device.down, .nodeLinkTree .node image.down, .nodeLinkTree .node rect.down, g.down path, .nodeLinkTree .node image.partialdown, .nodeLinkTree .node rect.partialdown, g.partialdown path { fill: #CC3300; background-color:#CC3300; } .treemap .device.up, .nodeLinkTree .node image.up, .nodeLinkTree .node rect.up, g.up path { fill: #009900; background-color:#009900; }

I'm trying to get the colors cc3300 for red and 009900 for green based on this hexcoding... http://www.techyuva.com/wp-content/uploads/hexagon_800.gif

Any ideas?

Thanks, Brennan

Hi,

what would be the code to change the color for acknowledged alerts?

We got a request from staff that this is easily confused with normal errors so we would like to change that.

Thanks for your help.

@bjobrien: Please put the code to the customerstyle.css (located in <PRTG Install Directory>\website\css\) instead of htmlheader_customer.htm . Then it should work.
@maengling: Please replace "up" in the css shown above with "downack" and then adjust the code to your needs. Example:

.treemap .device.downack,
.nodeLinkTree .node image.downack,
.nodeLinkTree .node rect.udownack,
g.downack path
{
fill: #98BD1D;
background-color:#98BD1D; 
}

Hi Konstantin,

Okay, I pulled the code from htmlheader_customer.htm and put it in customerstyle.css and that didn't seem to change anything. I went ahead and rebooted the entire server (which solved another problem in the process), but that didn't seem to change the colors either.

Here is my current customerstyles.css file in /website/css:

.treemap .device.down,
.nodeLinkTree .node image.down,
.nodeLinkTree .node rect.down,
g.down path,
.nodeLinkTree .node image.partialdown,
.nodeLinkTree .node rect.partialdown,
g.partialdown path
{
fill: #CC3300;
background-color:#CC3300;
}

.treemap .device.up,
.nodeLinkTree .node image.up,
.nodeLinkTree .node rect.up,
g.up path
{
fill: #009900;
background-color:#009900;
 
}

Can you please send us your customerstyles.css-file by mail to [email protected]

Hi all, I realize this thread is 5 years old now, but I wanted to let you know that this tip still applies on V17.4.35.

The change has to be made in \webroot\css\ in file styles_custom_v2.css

I added this code to darken the green in my Treemap:

.treemap .device.up,
.nodeLinkTree .node image.up,
.nodeLinkTree .node rect.up,
g.up path
{
fill: #009600;
background-color:#009600;
 
}

and after pressing Ctrl+F5, my Treemap now shows the darker green. The Sunburst also shows the same color, but "Device Up" greens in other locations were not affected.