BAR CHANGE SIZE 0 to 100%

[admin]

No Custom CSS is needed, just add Custom JavaScript and set Additional classes property to bar for all required visualization elements. Objects must have 1-byte scale (0..100%) data type to work properly.

Another option is to use clip-path property so icon is clipped from the top instead of from the bottom as in the previous example. Make sure that only one script is used at a time.

Code:

$(function(){
  if (typeof grp == 'undefined') {
    return;
  }
  
  $('.bar').each(function(_, wrapel) {
    var wrap = $(wrapel);
    var addr = wrap.data('object');
    var el = wrap.find('.icon').css('transition', 'clip-path 1s linear');

    grp.listen(addr, function(object) {
      el.css('clip-path', 'inset(' + (100 - object.value) + '% 0 0 0)')
    }, true);
  });
});