Grouping to matrix Table: Can cell background color be based on another field?

[imranmaszeri]

In Grafana 12.3.1 on Windows 11, I am looking to apply a cell-level color conditional formatting in a matrix table where the displayed value is the amount of a month and the color is based on the delta between the month’s value and its previous month’s value that is included in the query but not displayed in the table. Sample data is arranged through this query, after which it is transformed using “Grouping to matrix” [Column: Month, Row: Product, Cell value: Total Cost]:

WITH fake_monthly_costs AS (

  SELECT *

  FROM (VALUES

    ('Product A', DATE '2026-01-01', 100.00),

    ('Product A', DATE '2026-02-01', 120.00),

    ('Product A', DATE '2026-03-01', 90.00),

    ('Product A', DATE '2026-04-01', 95.00),

    ('Product A', DATE '2026-05-01', 80.00),

    ('Product A', DATE '2026-06-01', 130.00),




    ('Product B', DATE '2026-01-01', 500.00),

    ('Product B', DATE '2026-02-01', 450.00),

    ('Product B', DATE '2026-03-01', 470.00),

    ('Product B', DATE '2026-04-01', 470.00),

    ('Product B', DATE '2026-05-01', 430.00),

    ('Product B', DATE '2026-06-01', 460.00),




    ('Product C', DATE '2026-01-01', 1000.00),

    ('Product C', DATE '2026-02-01', 1100.00),

    ('Product C', DATE '2026-03-01', 1050.00),

    ('Product C', DATE '2026-04-01', 980.00),

    ('Product C', DATE '2026-05-01', 980.00),

    ('Product C', DATE '2026-06-01', 900.00)

  ) AS t(product, month_start, total_cost)

),




with_delta AS (

  SELECT

    product,

    month_start,

    total_cost,

    total_cost

      - LAG(total_cost) OVER (

          PARTITION BY product

          ORDER BY month_start

        ) AS mom_delta

  FROM fake_monthly_costs

)




SELECT

  product AS "Product",

  to_char(month_start, 'FMMonth, YYYY') AS "Month",

  total_cost AS "Total Cost",

  mom_delta AS "MoM Delta",

  month_start AS "Month Sort"

FROM with_delta

ORDER BY

  product,

  month_start;

I used the “Add field override” feature to configure thresholds in a single column (May, 2026) to highlight cells in red if value (my initial assumption is the MoM Delta value) is >0 and green if <0

However, the values that is being used for threshold highlighting is the one that is displayed in the table (Total Cost value)

I want the conditional formatting to use the MoM Delta value as its threshold lookup value. If I change the “Grouping to matrix” cell value to MoM Delta, I will get the correct cell coloring, but the table is not displaying the actual values

The expected cell value looks somewhat like below (value is Total Cost, cell highlight is based on MoM Delta):

[yosiasz]

great example of how to post a solid question with good sample data. so given this

So this is the math? and which cell background do you want to color?
mom_delta red if value is >0 and green if <0

I have found more control using Business Text

or using bootstrap.css

[carlocea9]

Well you’re in luck as this was a new feature introduced in v12 - “Style table cells using CSS properties”

Works amazing:

[yosiasz]

very nice @carlocea9 ! What happens when you hide that column (you dont want to show that surely)

Also let’s say I use this approach

    case 
      when coalesce(mom_delta,0) <0 then '{"backgroundColor": "red"}'
      when coalesce(mom_delta,0) >0 then '{"backgroundColor": "green"}'
      else '{"backgroundColor": "blue"}' end as css,   

for some reason I am not seeing it work it out.

[carlocea9]

What happens when you hide that column (you dont want to show that surely)

Same approach with data links URL - hide via override (NOT transformation > Organize fields)

@yosiasz

Also let’s say I use this approach

    case 
      when coalesce(mom_delta,0) <0 then '{"backgroundColor": "red"}'
      when coalesce(mom_delta,0) >0 then '{"backgroundColor": "green"}'
      else '{"backgroundColor": "blue"}' end as css,   

for some reason I am not seeing it work it out.

Curious what is the presented data on the panel from the table view on yours?

I’ve had some quirks in the past about double quote marks where only straights (") are accepted not curly (“ ”)

[imranmaszeri]

Thanks @carlocea9, using the CSS properties would fit my needs. However, the whole configuration falls apart once I use the “Grouping to matrix” transformation on the table visual. From what I understand, the pivot removes the CSS column and the field overrides only work if the column exists in the table panel. Is there a workaround on this?

I prefer a more native-level solution as I have constraints in installing new plugins, but I’m still open to it as a last resort

[yosiasz]

@carlocea9

past about double quote marks where only straights (") are accepted not curly (“ ”)

Is it you using the latter or data coming from a source you have no control over?

[infofcc3]

The CSS styling approach works for standard tables but breaks with “Grouping to matrix” because the transformation only carries a single Cell Value field into the pivot, dropping all other fields including the CSS column → making field overrides impossible after the pivot.

Use Business Text plugin to build the matrix manually
This keeps both Total_Cost and MoM_Delta accessible simultaneously without needing the Grouping to matrix transformation.
Set Render template → All rows and use this template:

handlebars

<style>
  .matrix-table { width:100%; border-collapse:collapse; }
  .matrix-table th, .matrix-table td { border:1px solid #555; padding:8px; text-align:center; }
  .matrix-table th { background:#222; color:white; }
</style>
<table class="matrix-table">
  <tr>
    <th>Product\Month</th>
    <th>Feb, 2026</th>
    <th>Mar, 2026</th>
    <th>Apr, 2026</th>
    <th>May, 2026</th>
  </tr>
  {{#each data}}
  {{#if (eq this.Month "Feb, 2026")}}
  <tr>
    <td>{{this.Product}}</td>
  {{/if}}
    <td style="background-color:{{#if (gt this.MoM_Delta 0)}}#2d6a2d{{else if (lt this.MoM_Delta 0)}}#8b0000{{else}}#444{{/if}};color:white;">
      {{this.Total_Cost}}
    </td>
  {{#if (eq this.Month "May, 2026")}}
  </tr>
  {{/if}}
  {{/each}}
</table>

I tested on Grafana 13.0.1:

• Green = positive MoM Delta
• Red = negative MoM Delta
• Values = Total Cost

[yosiasz]

@infofcc3 this is not a good approach as it uses manual static values. The whole idea of pivot matrix is it changes dynamically

@imranmaszeri do the pivoting in your database then dump the pivoted result into a temp table. Then do a post processing on that temp table to create a style column based on values

You lose control doing the pivot in grafana.