Dashboards & Visualizations

Assign colors to trellis based on status

schou87
Path Finder

Hi, I have a column chart trellis split into two parts basis status - Delivered and Not Delivered. How do I go ahead and color the two charts differently based on status? I have attached the snapshot of trellis.

Regards

Labels (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@schou87 

Can you please try this sample code?

<dashboard>
  <label>Trellis Column</label>
  <row>
    <panel>
       <html depends="$alwaysHideCSS$">
        <style>
          #columnchart1 #facet-viz_splitby_field_Status_splitby_value_Delivered #column .highcharts-graph {
            fill:#00ff00;
          }
          #columnchart1 #facet-viz_splitby_field_Status_splitby_value_Not_Delivered #column .highcharts-graph {
            fill:#ff0000;
          }
          
        </style>
      </html>
      <chart id="columnchart1">
        <search>
          <query>| makeresults count=10 
| eval c=1 
| accum c 
| eval A=case((c%3)==0,"Between 12 and 24 Hrs",1=1,"Greater Than 24 Hrs"),Status=case((c%2)==0,"Not Delivered",1=1,"Delivered") 
| xyseries A Status c</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">none</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

 

Thanks
KV
▄︻̷̿┻̿═━一

If this reply helps you, an upvote would be appreciated. 

0 Karma
Get Updates on the Splunk Community!

See just what you’ve been missing | Observability tracks at Splunk University

Looking to sharpen your observability skills so you can better understand how to collect and analyze data from ...

Weezer at .conf25? Say it ain’t so!

Hello Splunkers, The countdown to .conf25 is on-and we've just turned up the volume! We're thrilled to ...

How SC4S Makes Suricata Logs Ingestion Simple

Network security monitoring has become increasingly critical for organizations of all sizes. Splunk has ...