Splunk Search

How to change the color for a datavalue text in column chart

t900502
New Member

I've created a column chart and displayed datavaule on the column, but the color datavalue text are very light and difficult to read. How can I change the color for them or highlight them ?

Thanks.alt text

Tags (3)
0 Karma
1 Solution

niketn
Legend

@t900502... Please refer to my documentation on the same on the following Wiki link. In your case you need to override the data label g.highcharts-data-labels text text font color via CSS.

svg > g.highcharts-data-labels > g > text

http://wiki.splunk.com/User_talk:Niketnilay#Topic_2:_Overriding_Chart_Styles_using_CSS

You can also refer to Custom Layout Example: Dark example provided in Splunk 6.x Dashboard Examples app for introducing custom CSS Layout to your dashboards.

PS: CSS override may require your to reboot Splunk and clear browser history for changes to reflect.

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

View solution in original post

0 Karma

sudarshan391
Path Finder

@t900502 hi, sorry for asking a question in your post....how you put the datavalue text in column chart itself.
I am looking for the same thing and it will save time if you could bring your point here.

Thanks and sorry again.

Regards,
Sud

0 Karma

t900502
New Member

It's fine, seems you have got answer already.

0 Karma

niketn
Legend

@sudarshan391... the above screenshot is when the column chart's Stack Mode is set to stacked or "stacked 100%". By default it is "not stacked" so you don't have data values inside the columns. You can edit the Dashboard/Visualization and do this from Format menu. Please try out and let us know how it goes.

You should ideally ask a separate question for situations like this 🙂

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

sudarshan391
Path Finder

@niketnilay thanks yes, i was able to do the same. actually there is one more field just below the stack mode that is Show Data Values if we switch that on the values started to come on top of every column. and when we set Stack Mode to stacked these values start to come inside the column. both options are working for me. thanks for your quick reply.

I have some further questions regarding the column values, let me create new discussion.

0 Karma

niketn
Legend

@sudarshan391... Glad it worked. Do post your question. You will definitely find a prompt answer from the community.

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

niketn
Legend

@t900502... Please refer to my documentation on the same on the following Wiki link. In your case you need to override the data label g.highcharts-data-labels text text font color via CSS.

svg > g.highcharts-data-labels > g > text

http://wiki.splunk.com/User_talk:Niketnilay#Topic_2:_Overriding_Chart_Styles_using_CSS

You can also refer to Custom Layout Example: Dark example provided in Splunk 6.x Dashboard Examples app for introducing custom CSS Layout to your dashboards.

PS: CSS override may require your to reboot Splunk and clear browser history for changes to reflect.

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

t900502
New Member

Thanks a lot. it works after I changed the color.

But, How can I save it ? It came back when I re-fresh the page.

thx

0 Karma

niketn
Legend

@t900502... I think you are overriding the color directly in Inspect. You need to override using CSS for changes to be permanent. Did you follow the topic? Nevertheless, try the following steps:

Save the svg override as a CSS file (for example: svg-data-label-override.css)

svg > g.highcharts-data-labels > g > text
{
    fill:blue !important;
}

Then in your dashboard you would need to refer to the CSS file to override svg data label color.
<dashboard stylesheet="svg-data-label-override.css"> or <form stylesheet="svg-data-label-override.css"> depending upon whichever you are having.

PS: CSS/JS extension to Simple XML may require restart of Splunk and clearing of web browser history for changes to reflect.

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

t900502
New Member

I don't have the access to "$SPLUNK_HOME/etc/app//appserver/static folder"

anyway, thanks a lot for your help.

0 Karma

niketn
Legend

@t900502... You can also do it through Splunk UI provided you have access.

You need to go the apps/local page in Splunk UI by clicking on Blue Bolt icon that appears when you click on Splunk menu from the top left.

You can then select your App and Edit Properties to Upload Asset (in your case the CSS file). Provided you have the access to do the same from UI.

Else request Splunk admin to do the same on your behalf.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...