Style positive and negative values

The HTML Text Styler visual is great to highlight what’s important. Adding some color and format positive numbers different than negative ones makes it even easier to understand the message of the report.


When creating reports, you should stick to some rules concerning colors. Values which represent a positive message (e.g. Turnover above budget) should be green and negative values (e.g. Cash is below previous month) should be red. This will make it very clear what the recipient has to focus on. Select a country from the table in the sample report below and see how the text on the right and the color of the variance dynamically changes.

HTML Tags used in the sample report

These are the HTML tags used in the measure:

  • <span style=’color: rgb(129, 188, 6);’>
  • <span style=’color: red;’>

Span and style color tag

<span> = This element is a generic inline container for phrasing content. It can be used to group elements for styling purposes. Here, the “style” atttribute is used to define the color. Note that you can specify the color in RGB or just add the name of the color as we did for “red”

  • The span tag is used to grouping of inline-elements.
  • The span tag does not make any visual change by itself.

How the DAX code works

The way the DAX code works is explained directly in the code in the sample file. Download the file from above and take a look at the measure AC – BU Text.

We suggest you open your report next to the sample report and try to reproduce this. If doesn’t work for you, get in touch with us and we’ll help you out. Once you are familiar with this concept, you can add this to all your reports and make it super easy for everyone to know what to focus on.

Click here to get introduced to some of the most common HTML tags for formatting (bold, italic, underline, etc.)


Previous Article Moving Text – Live Ticker – Marquee
Next Article Using the category placeholder