Solved: Trellis Colors

MrJohn230 · ‎10-24-2023

I have the below Trellis, is there a way to change the color for each Trellis?

My code from Classic Dashboard.

search Cu $t_c$ En $t_e$
| timechart span=1h avg(Value) as AvgValue_Secs by Category

I want something like this:

ITWhisperer · ‎10-24-2023

Try something like this (note that the rollover colour changes are disabled by this):

<dashboard version="1.1" theme="light">
  <label>Trellis</label>
  <row>
    <panel depends="$alwayshide$">
      <html>
        <style>
          #trellis div.facets-container div.viz-panel:nth-child(1) g.highcharts-series path
          {
            fill: red !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(2) g.highcharts-series path
          {
            fill: green !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(3) g.highcharts-series path
          {
            fill: blue !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(4) g.highcharts-series path
          {
            fill: yellow !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <chart id="trellis">
        <search>
          <query>| makeresults count=100
| eval _time=relative_time(_time,"@h")-(random()%(5*60*60))
| eval Category="Category ".mvindex(split("ABCD",""),random()%4)
| eval Value=random()%100
| timechart span=1h avg(Value) as AvgValue_Secs by Category</query>
          <earliest>-5h@h</earliest>
          <latest>@h</latest>
        </search>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
      </chart>
    </panel>
  </row>
</dashboard>

View solution in original post

ITWhisperer · ‎10-24-2023

Try something like this (note that the rollover colour changes are disabled by this):

<dashboard version="1.1" theme="light">
  <label>Trellis</label>
  <row>
    <panel depends="$alwayshide$">
      <html>
        <style>
          #trellis div.facets-container div.viz-panel:nth-child(1) g.highcharts-series path
          {
            fill: red !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(2) g.highcharts-series path
          {
            fill: green !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(3) g.highcharts-series path
          {
            fill: blue !important;
          }
          #trellis div.facets-container div.viz-panel:nth-child(4) g.highcharts-series path
          {
            fill: yellow !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <chart id="trellis">
        <search>
          <query>| makeresults count=100
| eval _time=relative_time(_time,"@h")-(random()%(5*60*60))
| eval Category="Category ".mvindex(split("ABCD",""),random()%4)
| eval Value=random()%100
| timechart span=1h avg(Value) as AvgValue_Secs by Category</query>
          <earliest>-5h@h</earliest>
          <latest>@h</latest>
        </search>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">1</option>
      </chart>
    </panel>
  </row>
</dashboard>

uthornander_spl · ‎01-16-2024

This is very neat @ITWhisperer - but I have 2 more questions with regards to your answer.

Where are the colours defined (i.e. are there more, like pink and purple)?
Is Trellis limited to the number of graphs it can create (I can't get more than 12 for some reason).

UT

ITWhisperer · ‎01-16-2024

Colour can be defined a number of ways - here is a list of the standard named colour <named-color> - CSS: Cascading Style Sheets | MDN (mozilla.org)

I am not sure if there is a limit but I have over 120 single values in one trellis.

PickleRick · ‎10-24-2023

Not by using just SimpleXML elements. You might be able (but I'm not sure about that; I'm not a frontend developer) to add some custom JS to change colours of single trellis but in general it's not supported out-of-the-box.

Trellis Colors

timechart

trellis layout

.conf24 | Day 0

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

Troubleshooting the OpenTelemetry Collector