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:
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>
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>
This is very neat @ITWhisperer - but I have 2 more questions with regards to your answer.
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.
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.