[css mod] horizontal bars (for chart or ratings) - updated 20210307

logseq-bars v20210304 v20210307

a tag-triggered css mod to display horizontal bars for charts or ratings (with gradient or solid color)


usage :

it turns tags like #bar-00, #bar-10, #bar-20, etc… to #bar-100 into bars with a gradient.
use #flatbar-00 - #flatbar-100 to display solid red bars.
can be useful for quick ratings or feature comparison
note: works with increments of 10 only min:0 - max:100

protip : it works by detecting tags containing *bar-, so it means you can use #MyTopic-bar-60 to create a bar and see it as an unlinked ref in page [[MyTopic]]


copy the code at the bottom of your custom.css or apply via Stylus extension for browsers.

code :

/*==== logseq-bars v20210307 start ====== */
/* resets tag style */
a[data-ref*=bar-].tag {
    font-size: 0;
    width: 104px;
    height: 6px;
    margin: 0px 10px;
    padding:1px 1px;
    display: inline-block;
    text-align: start;
    vertical-align: middle;
    border: 1px solid var(--ls-border-color);
    border-radius: 6px;
    background: #12121287;
    /* optionnal settings for right justification below - uncomment by removing the '/*' '*/' */
    /* position: absolute; */
    /* right: 0; */
    content: "";
    height: 4px;
    top: -1px;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    background-image: linear-gradient(to right, red 0px,#fa2 20px,#fffc5f 30px,#00ff62 50px,#22ffed 70px, #002fff 90px);
    a[data-ref*=flatbar-].tag:before {background:red;}
    a[data-ref*=bar-00].tag:before {width: 1px;}
    a[data-ref*=bar-10].tag:before {width: 10px;}
    a[data-ref*=bar-20].tag:before {width: 20px;}
    a[data-ref*=bar-30].tag:before {width: 30px;}
    a[data-ref*=bar-40].tag:before {width: 40px;}
    a[data-ref*=bar-50].tag:before {width: 50px;}        
    a[data-ref*=bar-60].tag:before {width: 60px;}
    a[data-ref*=bar-70].tag:before {width: 70px;}
    a[data-ref*=bar-80].tag:before {width: 80px;}
    a[data-ref*=bar-90].tag:before {width: 90px;}
    a[data-ref*=bar-100].tag:before {width: 100px;}

/*==== logseq-bars v20210307 end ====== */

updated to v20210307. see first post for the updated code block

  • added on overlay showing the maximum length of the bar so it’s easier to see current level / max level.
  • reversed tyhe gradient colors : starts with red and goes toward blue