topic Re: How to change the color for a datavalue text in column chart in Splunk Search

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

t900502 — Mon, 10 Apr 2017 23:31:07 GMT

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.

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

niketn — Tue, 11 Apr 2017 08:31:08 GMT

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

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

sudarshan391 — Tue, 11 Apr 2017 08:43:34 GMT

@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

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

niketn — Tue, 11 Apr 2017 16:57:30 GMT

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

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

t900502 — Tue, 11 Apr 2017 20:14:34 GMT

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

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

t900502 — Tue, 11 Apr 2017 20:17:08 GMT

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

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

niketn — Wed, 12 Apr 2017 01:40:38 GMT

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

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

sudarshan391 — Wed, 12 Apr 2017 04:58:03 GMT

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

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

niketn — Wed, 12 Apr 2017 06:10:50 GMT

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

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

t900502 — Wed, 12 Apr 2017 16:30:19 GMT

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

anyway, thanks a lot for your help.

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

niketn — Wed, 12 Apr 2017 16:36:35 GMT

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