Possible to change color of a TimelineView?

[kcnolan13]

I am building an HTML dashboard that includes a TimelineView component ('splunkjs/mvc/timelineview'), instantiated like so:

var timeline = new TimelineView({
id: 'main-timeline',
managerid: 'reviewTableFetchSearch',
el: $('#main-timeline')
}, {tokens: true}).render();

I hoped a property like 'charting.seriesColors' or 'charting.fieldColors' might adjust the bar colors, but none of those work here and I haven't seen any documentation on changing the colors of this kind of component in the Splunk Web Framework site.

Is it possible to do so?

[niketn · Accepted solution]

@kcnolan13, first off Splunk JS stack TimeLineView is not the same as Timeline Custom Visualization App

TimeLineView is built using canvas using shared JS library. Changing color for histogram displayed is not exposed. So, you can either request an enhancement for TimeLineView to allow changing color or else use Timechart to plot similar view as TimeLineView. Can you please describe which features of TimeLineView do you want to use, which are not available in Timechart?

[kcnolan13]

Thanks for the definitive answer; that is what I suspected. I mainly just prefer the chart annotations, data labels, and select/deselect animations of TimeLineView over Timechart. But now that I have a definitive answer that the exposed configuration interface is as limited for TimeLineView as I thought, I may pivot to a Timechart instead.

[niketn]

For Splunk Lite the color of TimeLineView is Orange and that for Splunk Enterprise is Green. I was able to find the piece of shared JavaScript code which does this (Timeline.js, splunk_timeline.js CanvasTimeline.js
) . However, changing the seiesColor value did not seem to change the TimeLine color. Instead Splunk instance started complaining about File Integrity issue since the default installed file was modified manually.

If you can request an Enhancement for changing color for TimeLineView that would be great! I am upvoting this question 🙂

[mayurr98]

After configuring what is given in this doc

have you
1) cleared browser cache?
2) restarted the server?
3) did url/en-US/debug/refresh?
4) did url/en-US/_bump?

if you have not then do all these four things and check if you get the visualisation you want
let me know if this helps!

[493669]

Have you tried to css formatting in application.css

div.FlashTimeline {
     background-color: #fbfbfb;
     border-left-color: #000;
     color: #000;
     border-right-color: #527BA9;
 }

refer https://answers.splunk.com/answers/83191/timeline-css-colors-or-colours.html
https://docs.splunk.com/Documentation/Timeline/1.1.0/TimelineViz/TimelineFormat
also you can use timeline property:

<option name="timeline_app.timeline.useColors">true</option>
<option name="timeline_app.timeline.colorMode = categorical</option>
<option name="timeline_app.timeline.minColor">#6db7c6</option>

refer: https://docs.splunk.com/Documentation/Timeline/1.1.0/TimelineViz/TimelineXML

[kcnolan13]

I saw that post too, but unfortunately it didn't work for me... even after adding CSS !important rules.

Regarding the timeline viz properties, correct me if I'm mistaken, but I believe TimelineViz and TimelineView are actually different things. That being said, I did try a few of those TimelineViz properties, but they had no effect either.

[493669]

Yes, as @niketnilay also said timeline view and Timeline Custom Visualization app is different. TimelineViz property will be used after installation of Custom Visualization app...have a look on https://splunkbase.splunk.com/app/3120/
After installing this app you’ll find a timeline visualization as an additional item in the visualization picker in Search and Dashboard.