Dashboards & Visualizations

How to change color of entire row based on field value range of a column


I have the below Table. I want to change the color of entire row based on value of a field of Count column. I am getting option in UI to change the color of fields based on the range(Like <30-70> amber,<70-max> red). But I want the row color to be changed. Could anyone help me in this?
alt text

query used: index="abc" sourcetype="xyz" field="false" | stats count by service name, user ID

Tags (2)
0 Karma


Hi @Arpmjdr,

You need some js and css for that. See below example from Splunk Dashboard examples : https://splunkbase.splunk.com/app/1603/


<dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
    <label>Table Row Highlighting</label>
    <description>Color table rows based on conditions having multiple field values.</description>
        <table id="highlight">
            <title>Row Coloring</title>
                <query>index=_internal sourcetype=splunkd component=Metrics group=search_concurrency
                    | eval user=coalesce(user, "system total")
                    | bucket _time span=1h
                    | stats avg(active_hist_searches) as active_hist_searches avg(active_realtime_searches) as active_realtime_searches by _time,user
            <option name="drilldown">none</option>


], function(_, $, mvc, TableView) {
     // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            return _(['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            // Apply interpretation for number of historical searches
            if (cell.field === 'active_hist_searches') {
                if (value > 2) {
            // Apply interpretation for number of realtime searches
            if (cell.field === 'active_realtime_searches') {
                if (value > 1) {
            // Update the cell content
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
            tableView.$el.find('td.range-cell').each(function() {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());


/* Custom Icons */
td.icon {
    text-align: center;
td.icon i {
    font-size: 25px;
    text-shadow: 1px 1px #aaa;
td.icon .severe {
    color: red;
td.icon .elevated {
    color: orangered;
td.icon .low {
    color: #006400;
/* Row Coloring */
#highlight tr td {
    background-color: #c1ffc3 !important;
#highlight tr.range-elevated td {
    background-color: #ffc57a !important;
#highlight tr.range-severe td {
    background-color: #d59392 !important;
#highlight .table td {
    border-top: 1px solid #fff;
#highlight td.range-severe, td.range-elevated {
    font-weight: bold;
.icon-inline i {
    font-size: 18px;
    margin-left: 5px;
.icon-inline i.icon-alert-circle {
    color: #ef392c;
.icon-inline i.icon-alert {
    color: #ff9c1a;
.icon-inline i.icon-check {
    color: #5fff5e;
Happy Splunking!
Get Updates on the Splunk Community!

Streamline Data Ingestion With Deployment Server Essentials

REGISTER NOW!Every day the list of sources Admins are responsible for gets bigger and bigger, often making the ...

Remediate Threats Faster and Simplify Investigations With Splunk Enterprise Security ...

REGISTER NOW!Join us for a Tech Talk around our latest release of Splunk Enterprise Security 7.2! We’ll walk ...

Introduction to Splunk AI

WATCH NOWHow are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. ...