Mouse Over Donut Slice

[sarvesh_11]

Hi 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;
       }

[niketn · Accepted solution]

@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!

[sarvesh_11]

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?

[niketn]

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.

[sarvesh_11]

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.

[sarvesh_11]

Hey @niketnilay this worked.

Thanks Mate!