DAX SVG measure · Trend

Column sparkline: small multiple bars in a Power BI table

When periods are discrete (hours of the day, weekdays, fiscal months), columns read better than a connecting line because nothing happens between them. The column sparkline draws one bar per period from a shared zero and highlights either the latest period or the peak.

Customise in the builder →Jump to the DAX

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

Column sparkline (small multiple bars) rendered from the DAX below with sample data — Rendered from the measure below with sample data at 2× (120×32 px in Power BI). 924 characters.

Use it when

Periods are categories more than a continuum: hour of day, weekday, shift.
You want the peak period of each row to jump out (busiest hour per site).
Values can be negative: bars grow down from zero, which a line can't show.

Skip it when

There are more than about 30 periods in the cell: the bars become one-pixel slivers. Aggregate to a coarser grain or use a line sparkline.

Three looks

The column sparkline (small multiple bars) 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: Per-period value; zero is always included in the scale.
Axis column: Date or numeric column. The bars are placed by rank (RANKX), so missing periods don't leave gaps.

The full DAX

Swap [Sales] and 'Date'[Month Start] for your own names.

Column Sparkline (measure)

Column Sparkline =
-- VizForge SVG measure: column sparkline.
-- Set Measure tools > Data category = Image URL. Put it in a table or matrix next to a category column.
-- The axis must be a date or number column so points are spaced in time order.
-- 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 _Base = FILTER (
    ADDCOLUMNS (
        ALLSELECTED ( 'Date'[Month Start] ),
        "@x", CONVERT ( 'Date'[Month Start], DOUBLE ),
        "@v", [Sales]
    ),
    NOT ISBLANK ( [@v] )
)
VAR _Data = ADDCOLUMNS ( _Base, "@i", RANKX ( _Base, [@x], , ASC, DENSE ) )
VAR _N = COUNTROWS ( _Data )
VAR _Lo = MIN ( 0, MINX ( _Data, [@v] ) )
VAR _Hi = MAX ( 0, MAXX ( _Data, [@v] ) )
VAR _Slot = DIVIDE ( 118, _N, 0 )
VAR _Zero = 1 + ( 1 - DIVIDE ( 0 - _Lo, _Hi - _Lo, 0.5 ) ) * 30
VAR _Bars = CONCATENATEX (
    _Data,
    "<rect x='"
            & FORMAT ( 1 + ( ( [@i] - 1 ) * _Slot + _Slot * 0.125 ), "0.0", "en-US" )
            & "' y='"
            & FORMAT (
                MIN ( 1 + ( 1 - DIVIDE ( [@v] - _Lo, _Hi - _Lo, 0.5 ) ) * 30, _Zero ),
                "0.0",
                "en-US"
            )
            & "' width='"
            & FORMAT ( _Slot * 0.75, "0.0", "en-US" )
            & "' height='"
            & FORMAT (
                MAX ( ABS ( 1 + ( 1 - DIVIDE ( [@v] - _Lo, _Hi - _Lo, 0.5 ) ) * 30 - _Zero ), 0.75 ),
                "0.0",
                "en-US"
            )
            & "' fill='"
            & IF ( [@i] = _N, "%23118DFF", "%23605E5C" )
            & "'/>",
    "",
    [@i], ASC
)
RETURN
    IF (
        COUNTROWS ( _Data ) < 1,
        BLANK (),
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'>"
            & _Bars
            & "</svg>"
    )

DAX user-defined function variant (VizForge.SvgColumnSparkline)

One-line call: Column Sparkline = VizForge.SvgColumnSparkline ( [Sales], 'Date'[Month Start] )

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
    /// Column sparkline (small multiple bars) as an SVG image URL (VizForge). Optional parameters default to the colours you picked.
    FUNCTION VizForge.SvgColumnSparkline = (
            pValue : ANYREF EXPR,
            pAxis : ANYREF EXPR,
            pHighlightColor : STRING = "#118DFF",
            pBarColor : STRING = "#605E5C"
        ) =>
        VAR _Base = FILTER (
            ADDCOLUMNS (
                ALLSELECTED ( pAxis ),
                "@x", CONVERT ( pAxis, DOUBLE ),
                "@v", CALCULATE ( pValue )
            ),
            NOT ISBLANK ( [@v] )
        )
        VAR _Data = ADDCOLUMNS ( _Base, "@i", RANKX ( _Base, [@x], , ASC, DENSE ) )
        VAR _N = COUNTROWS ( _Data )
        VAR _Lo = MIN ( 0, MINX ( _Data, [@v] ) )
        VAR _Hi = MAX ( 0, MAXX ( _Data, [@v] ) )
        VAR _Slot = DIVIDE ( 118, _N, 0 )
        VAR _Zero = 1 + ( 1 - DIVIDE ( 0 - _Lo, _Hi - _Lo, 0.5 ) ) * 30
        VAR _Bars = CONCATENATEX (
            _Data,
            "<rect x='"
                    & FORMAT ( 1 + ( ( [@i] - 1 ) * _Slot + _Slot * 0.125 ), "0.0", "en-US" )
                    & "' y='"
                    & FORMAT (
                        MIN ( 1 + ( 1 - DIVIDE ( [@v] - _Lo, _Hi - _Lo, 0.5 ) ) * 30, _Zero ),
                        "0.0",
                        "en-US"
                    )
                    & "' width='"
                    & FORMAT ( _Slot * 0.75, "0.0", "en-US" )
                    & "' height='"
                    & FORMAT (
                        MAX ( ABS ( 1 + ( 1 - DIVIDE ( [@v] - _Lo, _Hi - _Lo, 0.5 ) ) * 30 - _Zero ), 0.75 ),
                        "0.0",
                        "en-US"
                    )
                    & "' fill='"
                    & IF (
                        [@i] = _N,
                        SUBSTITUTE ( pHighlightColor, "#", "%23" ),
                        SUBSTITUTE ( pBarColor, "#", "%23" )
                    )
                    & "'/>",
            "",
            [@i], ASC
        )
        RETURN
            IF (
                COUNTROWS ( _Data ) < 1,
                BLANK (),
                "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'>"
                    & _Bars
                    & "</svg>"
            )

EVALUATE { VizForge.SvgColumnSparkline ( [Sales], 'Date'[Month Start] ) }

-- 2) Then create the measure and set Measure tools > Data category = Image URL:
-- Column Sparkline = VizForge.SvgColumnSparkline ( [Sales], 'Date'[Month Start] )
--    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

Use it as a small-multiples column per row: category on rows, measure in Values, 32 × 120. It reads best with 6 to 18 periods, so pair it with a relative-date slicer rather than a fixed year. Remember the Image URL data category. All setup steps.

Gotchas

Because bars are placed by rank, a missing month closes up instead of leaving a gap; use a line sparkline if gaps matter.
'Highest period' highlights every bar that ties for the maximum.
Each bar is one <rect> per period per row: 24 hours × 500 rows is 12,000 rects, so filter the table or use TOPN.
Length. 924 characters at 12 periods, 2,549 at 36, once per row.
Context. The baseline is zero (or below it when a period is negative) and the tallest bar fills the row's own height, so bars are comparable within a row, not across rows. The last period is drawn in the accent colour.
Tooltip. Hovering shows the SVG text; a blank report-page tooltip hides it.

When an SVG measure isn't enough

A custom visual can show each period's value on hover and let users click a period to filter the page. See the KPI card 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.

Peak period columns