TRUECHART Knowledge Base Live Search

Search

Page tree

trueChart Help

Skip to end of metadata
Go to start of metadata

The following section describes how to implement the following dynamic level indicator with Button+ and Custom CSS.

Result

The right second (from the top) button shows a dynamic filling depending on the selection of the year. The filling is achieved by background with color gradient defined by expression-based custom CSS. Furthermore, the background color of the text has been adjusted to ensure legibility in filled or unfilled text.

Button configuration

PropertyValue
Typecustom
Text='<span style="background-color: rgba(255,255,255,0.6)">' & Round($([your variable name]) / 0.12) & '% </br>of year selected</span>'
Custom css
(use expression)
='background: linear-gradient( to right, rgb(1,112,193) 0%, rgb(1,112,193) ' & Round($([your variable name])/0.12) & '%, rgb(255,255,255) ' & Round($([your variable name])/0.12) & '%, rgb(255,255,255) 100% );'