Change timeline resource category color

[doronca]

Hi Splunkers,

Is it possible to choose the color of categories in a timeline? I would like to map color to category

Thanks,
Doron

[niketn · Accepted solution]

@doronca for timeline custom visualization series color change, you will have to CSS override.
Refer to my older answer on similar use case: https://answers.splunk.com/answers/552658/pick-colours-for-certain-value.html

[doronca]

Thanks for the answer.

[venkasplunk]

Hi,

Got u.

Try this. If ok pls accept my answer.

option name="charting.fieldColors"
{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}
/option

Ignoring the <> before option, because its not working, please check.

[venkasplunk]

{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}

[doronca]

Hi,
Where and how exactly should I use this color mapping?

[venkasplunk]

Just posted the answer again, some how if i use <> the option is getting removed.

[doronca]

Thanks, seems like the issue still exists. The colors stays the same as before.

[venkasplunk]

Can you paste your code here? For me its working.

I used ur color coding and for me its showing nice colors, For ex: ur critical is red? Low is green?

[venkasplunk]

Do take a note that its case sensitive, if your severity is High use High and dont use high

[venkasplunk]

Can you try moving that line before /viz

[doronca]

you mean something like:

    <panel>
     <option name="charting.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>
      <viz type="timeline_app.timeline">
        <title>Timeline</title>
        <search>
          <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | bin span=1m _time | search severity="$tok_severity$" | table _time alert severity</query>
          <earliest>$global_time.earliest$</earliest>
          <latest>$global_time.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>10m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="refresh.display">progressbar</option>
        <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
        <option name="timeline_app.timeline.colorMode">categorical</option>
        <option name="timeline_app.timeline.maxColor">#DA5C5C</option>
        <option name="timeline_app.timeline.minColor">#FFE8E8</option>
        <option name="timeline_app.timeline.numOfBins">5</option>
        <option name="timeline_app.timeline.tooltipTimeFormat">SECONDS</option>
        <option name="timeline_app.timeline.useColors">1</option>
      </viz>
    </panel>

still doesnt work.. can you copy in the version that worked for you?

[venkasplunk]

No , i meant the last /viz. Below the timeline_app.timeline.useColors.

What version are you referring to?

[doronca]

<panel>
  <viz type="timeline_app.timeline">
    <title>Timeline</title>
    <search>
      <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | bin span=1m _time | search severity="$tok_severity$" | table _time alert severity</query>
      <earliest>$global_time.earliest$</earliest>
      <latest>$global_time.latest$</latest>
      <sampleRatio>1</sampleRatio>
      <refresh>10m</refresh>
      <refreshType>delay</refreshType>
    </search>
    <option name="refresh.display">progressbar</option>
    <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.colorMode">categorical</option>
    <option name="timeline_app.timeline.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>
    <option name="timeline_app.timeline.maxColor">#DA5C5C</option>
    <option name="timeline_app.timeline.minColor">#FFE8E8</option>
    <option name="timeline_app.timeline.numOfBins">5</option>
    <option name="timeline_app.timeline.tooltipTimeFormat">SECONDS</option>
    <option name="timeline_app.timeline.useColors">1</option>
  </viz>
</panel>

I tried both with:

<option name="timeline_app.timeline.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>

and:

<option name="charting.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>

[venkasplunk]

Can you give some more inputs?

U can also refer to https://answers.splunk.com/answers/506607/using-timeline-visulations-can-i-get-the-colors-to.html

[doronca]

Hi, thanks for replying.
I saw the post you've shared, but it's not 100% solving my problem.

The search below produces a timeline divided into 5 different severity categories that are randomly mapped to color. what I am trying to do is set the categories as follows:

Color-mapping:
{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}

Search:

<panel>
  <viz type="timeline_app.timeline">
    <title>Timeline</title>
    <search>
      <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | table _time alert severity</query>
      <earliest>$global_time.earliest$</earliest>
      <latest>$global_time.latest$</latest>
      <sampleRatio>1</sampleRatio>
      <refresh>10m</refresh>
      <refreshType>delay</refreshType>
    </search>
    <option name="refresh.display">progressbar</option>
    <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.colorMode">categorical</option>
    <option name="timeline_app.timeline.numOfBins">5</option>
    <option name="timeline_app.timeline.tooltipTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.useColors">1</option>
  </viz>
</panel>