All Apps and Add-ons

Mouse Over Donut Slice

sarvesh_11
Communicator

alt textalt textHi Splunkers,
Please refer to attached image, i have js and css for the current view, as a part of requirement, how can i add more logic to the tooltip, the mouse over slice.
i got my needed view, as i changed field value from Normal to "Normal | Hosts Count with <5 for Today", but when i deed the same change in css and js, those changes are not reflecting.

CSS for Needed image:

toklabel g.c3-chart-arc.c3-target-"Normal | Hosts Count with <5 for Today" text{

         fill:white !important;
       }

toklabel text.c3-chart-arcs-title{

       fill:white !important;
       }
       #toklabel g.c3-shapes.c3-shapes-"Warning | Hosts count with 5< Count <10 for Today" path.c3-shape.c3-arc-"Warning | Hosts count with 5< Count <10 for Today"{
           fill:orange !important;
       }
       #toklabel g.c3-shapes.c3-shapes-"Critical | Hosts conut with >10 For Today" path.c3-shape.c3-arc-"Critical | Hosts conut with >10 For Today"{
           fill:red !important;
       }
       #toklabel g.c3-shapes.c3-shapes-"Normal | Hosts Count with <5 for Today" path.c3.shape.c3-arc-"Normal | Hosts Count with <5 for Today"{
           fill:green !important;
       }
       #toklabel div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--"Warning | Hosts count with 5< Count <10 for Today" td.name span{
           background-color:orange !important;
       }
       #toklabel div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--"Critical | Hosts conut with >10 For Today" td.name span{
           background-color:red !important;
       }
       #toklabel div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--"Normal | Hosts Count with <5 for Today" td.name span{
           background-color:green !important;
       }
       #toklabel g.c3-legend-item-""Warning | Hosts count with 5< Count <10 for Today"" line.c3-legend-item-tile{
           stroke:orange !important;
       }
       #toklabel g.c3-legend-item-""Critical | Hosts conut with >10 For Today"" line.c3-legend-item-tile{
           stroke:red !important;
       }
       #toklabel g.c3-legend-item-""Normal | Hosts Count with <5 for Today"" line.c3-legend-item-tile{
           stroke:green !important;
       }
0 Karma
1 Solution

niketnilay
Legend

@sarvesh_11 you would need to convert space and special characters to hyphen. Refer the the following example for critical. Ideally you should use Browser Inspector to identify the correct path to apply CSS override. Refer to the following blog to understand all about Simple XML CSS extension: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

Following is incorrect CSS Selector

#toklabel g.c3-shapes.c3-shapes-"Critical | Hosts conut with >10 For Today" path.c3-shape.c3-arc-"Critical | Hosts conut with >10 For Today"{
fill:red !important;
}

Which Should actually be:

#toklabel g.c3-shapes.c3-shapes-Critical---Hosts-conut-with--10-For-Today path.c3-shape.c3-arc-Critical---Hosts-conut-with--10-For-Today{
fill:red !important;
}

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketnilay
Legend

@sarvesh_11 you would need to convert space and special characters to hyphen. Refer the the following example for critical. Ideally you should use Browser Inspector to identify the correct path to apply CSS override. Refer to the following blog to understand all about Simple XML CSS extension: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

Following is incorrect CSS Selector

#toklabel g.c3-shapes.c3-shapes-"Critical | Hosts conut with >10 For Today" path.c3-shape.c3-arc-"Critical | Hosts conut with >10 For Today"{
fill:red !important;
}

Which Should actually be:

#toklabel g.c3-shapes.c3-shapes-Critical---Hosts-conut-with--10-For-Today path.c3-shape.c3-arc-Critical---Hosts-conut-with--10-For-Today{
fill:red !important;
}

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

sarvesh_11
Communicator

Hi @niketnilay i tried with this too, using Hyphen in pace of space, but that doesn't looks good in dashboard, any way we can include spaces?

0 Karma

niketnilay
Legend

Hyphen is for CSS when Space is used in actual slice. With your existing code that you have provided above CSS can be applied directly.

CSS Styles just styles the dashboard it's code will not be visible in the dashboard. Did you try to inspect existing slice in your donut and check the selected path name? When you have space in the slice name it will have hyphen in the selector as selector can not accept space or special character.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sarvesh_11
Communicator

I have checked the inspect job, for slice, it seems fine
But still, it is not showing the assigned color for Normal, i have uploaded the image on the original question. though the container color of tooltip is coming green.

0 Karma

sarvesh_11
Communicator

Hey @niketnilay this worked.

Thanks Mate!

Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.