Creating Dynamic String Values Using CSS in Markdown Visualizations

Providing guidance to your customers as to the grain of time they have applied to a given set of data when using a filter can be helpful guider text within your dashboards. Being able to do data transformation to present this information in a consistent and more easily readable way, while also maintaining the dynamic values, can be especially helpful!

Enter CSS :sparkles: magic :sparkles:

By adding the mustache syntax to access field variables within a data property in a html element, CSS can then be used to append a value to the same html element to create a dynamic value that can be included in your dashboard.

In the example code below, I added a data element to a tag and set the data element to the selected value from the filter ({{filters.table.field.summary}}). Within the CSS for the h3 element for each time grain value, I set a value to be appended “::after” to the h3 element.

This shows in the tile as a dynamic value for “Time Grain Selected:” and then the grain of time (minute, hour, day, week, month, year) is appended or the full string of the date filter is returned as a fallback.

h/t to @sarah on our Design team for being a markdown magician and helping build this out!

One caution: this won’t come through in deliveries and alerts given the CSS Magic to make it happen!

<style>
.kpi-markdown-wrapper,
.kpi-visualization {
}

h3[data-item*=" "]::after {
  content: "{{filters.main__real_estate_sales.date_recorded.summary}}";
}

h3[data-item*="minute"]::after {
  content: "minute";
}

h3[data-item*="hour"]::after {
  content: "hour";
}
  
h3[data-item*="day"]::after {
  content: "day";
}

h3[data-item*="week"]::after {
  content: "week";
}

h3[data-item*="month"]::after {
  content: "month";
}

h3[data-item*="year"]::after {
  content: "year";
}

</style>
<div class="kpi-visualization kpi-vertical-top">
<div class="kpi-markdown-wrapper kpi-align-left">

<span>{{result.0.main__real_estate_sales.count.value}}</span>

<single-value label=" Time Range Selected: {{filters.main__real_estate_sales.date_recorded.summary}}">   </single-value>

<h3 data-item="{{filters.main__real_estate_sales.date_recorded.summary}}"> Time Grain Selected: </h3>

</div></div>

Super-helpful! It would be amazing if the explicit start and end date for the dates were available in the moustache templates so users could clearly understand the date without expanding the filter drop down. For example, 1 complete month ago for 1 month revealed the calculated date of 2025-08-01 to 2025-08-31 as a moustache template.