DAX SVG measure · Status

Traffic light and RAG status with a DAX SVG measure

A RAG dot compresses a number into three states. The risk is that colour is the only signal, which fails for readers with red-green colour vision deficiency. The three-lamp style fixes that: position carries the state as well as colour. The ring style changes shape (filled vs outline) for the same reason.

Customise in the builder →Jump to the DAX

By Nawaf Sharaf · Founder & Reliability Engineer · Updated November 4, 2026

Rendered from the measure below with sample data at 2× (14×14 px in Power BI). 159 characters.

Use it when

Status matters more than the number: project health, SLA attainment, stock cover.
The audience prints reports or views them on poor displays.

Skip it when

The thresholds are arbitrary or disputed: three colours imply more certainty than the data has. Show the number with a data bar.

Three looks

The traffic light / rag dot in three palettes; click one to edit it.

Data it needs

The builder asks for exactly these fields; type your own measure and column names there.

Value measure: A ratio or score compared with the two thresholds. Lower-is-better metrics flip the comparison.

The full DAX

Swap [Attainment %] for your own names.

RAG Status (measure)

RAG Status =
-- VizForge SVG measure: RAG dot.
-- Set Measure tools > Data category = Image URL, then size it under Format > Visual > Image size.
-- Made with the free VizForge SVG measure builder: vizforge.ai/tools/svg-measure-builder
-- Need per-point tooltips, click-to-select inside the chart or Format-pane settings? Generate it as a real custom visual: vizforge.ai/visuals
VAR _Value = [Attainment %]
VAR _State = SWITCH ( TRUE (), _Value >= 1, 2, _Value >= 0.9, 1, 0 )
RETURN
    IF (
        ISBLANK ( _Value ),
        BLANK (),
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='7' cy='7' r='7' fill='"
            & SWITCH ( TRUE (), _State >= 2, "%231AAB40", _State >= 1, "%23D9B300", "%23D64554" )
            & "'/></svg>"
    )

DAX user-defined function variant (VizForge.SvgRag)

One-line call: RAG Status = VizForge.SvgRag ( [Attainment %] )

DAX query view script

-- 1) Paste into DAX query view and choose 'Update model with changes'.
--    Needs DAX user-defined functions (generally available since the June 2026 Power BI release).
DEFINE
    /// Traffic light / RAG dot as an SVG image URL (VizForge). Optional parameters default to the colours you picked.
    FUNCTION VizForge.SvgRag = (
            pValue : NUMERIC,
            pHighAt : NUMERIC = 1,
            pLowAt : NUMERIC = 0.9,
            pGoodColor : STRING = "#1AAB40",
            pWarnColor : STRING = "#D9B300",
            pBadColor : STRING = "#D64554"
        ) =>
        VAR _Value = pValue
        VAR _State = SWITCH ( TRUE (), _Value >= pHighAt, 2, _Value >= pLowAt, 1, 0 )
        RETURN
            IF (
                ISBLANK ( _Value ),
                BLANK (),
                "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='7' cy='7' r='7' fill='"
                    & SWITCH (
                        TRUE (),
                        _State >= 2,
                        SUBSTITUTE ( pGoodColor, "#", "%23" ),
                        _State >= 1,
                        SUBSTITUTE ( pWarnColor, "#", "%23" ),
                        SUBSTITUTE ( pBadColor, "#", "%23" )
                    )
                    & "'/></svg>"
            )

EVALUATE { VizForge.SvgRag ( [Attainment %] ) }

-- 2) Then create the measure and set Measure tools > Data category = Image URL:
-- RAG Status = VizForge.SvgRag ( [Attainment %] )
--    Colours and thresholds are optional parameters: pass a value after the fields to override one.
--    Pass colours as plain "#RRGGBB"; the function encodes the # for the data URI.

Placing it in a report

A 14 × 14 dot is meant to sit in a narrow column before the KPI name. In a matrix with periods on columns, it gives a quick RAG heat-strip per row. Remember the Image URL data category. All setup steps.

Gotchas

Thresholds are inclusive on the good side: with 'higher is better', a value equal to the green threshold is green.
Keep the unlit lamp colour light enough to look off but visible against the table background.
Pair the dot with the number in the next column; the dot alone hides how close to the boundary a row is.
Length. 159 characters whatever the data; no iteration.
Context. The thresholds compare [Attainment %] for the row with fixed values (1 and 0.9 by default). A total row is judged on the total attainment, which can be green while half the rows are red.
Tooltip. Hovering shows the SVG text; a blank report-page tooltip hides it.

When an SVG measure isn't enough

A status matrix visual can explain which threshold was crossed in a tooltip and filter to all red items in one click. See the Heatmap custom visual for what an interactive version can do.

KPI card designs using it

Finished designs built on this pattern, from the KPI card gallery.