Trellis Colors

[MrJohn230]

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 · Accepted solution]

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]

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

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

[ITWhisperer]

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]

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.