Hi Lisha ,
I think one change is to add '%' symbol in line number 9 (highlighted in screenshot)
Another way to display progress bar in Sisense :
-Hari
Added the '%' symbol in the script, still no change.
Also tried following the link you suggested, getting something like this
Unable to see the gray part, not sure what's the issue
This is the Blox script I tried:
{
"style": "#tooltip::after {position: absolute; left:50%; margin-left:-2px; top:21px;content:''; width: 0; height: 0; border-left:5px solid transparent;border-right: 5px solid transparent; border-top: 5px solid #a264b5;}",
"script": "",
"title": "",
"showCarousel": false,
"body": [
{
"type": "TextBlock",
"text": "️<div id='tooltip' style='position:relative; margin-left:calc({panel:percentage}% + 117px); font-size:12px;color:#fff; font-weight:bold; background-color:#a264b5; width: 50px; text-align:center; border-radius: 3px; padding: 2px 4px;overflow: visible;'>{panel:total}</div>",
"style": {
"width": "calc(100% - 150px)",
"overflow": "visible"
}
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"width": "140px"
},
"items": [
{
"type": "TextBlock",
"text": "️{panel:local_authority}",
"style": {
"text-align": "right",
"font-weight": "bold"
}
}
]
},
{
"type": "Column",
"style": {
"width": "calc(100% - 140px)"
},
"items": [
{
"type": "TextBlock",
"style": {
"background": "#dedede",
"transition": "width 2s ease",
"margin": "4px 5px 0px",
"width": "calc(100% - 10px)",
"height": "10px",
"border-radius": "5px",
"overflow": "hidden",
"display": "flex",
"justify-content": "flex-start"
},
"text": "️<div class='inner' style='height:100%; width:{panel:percentage}; background:#27a1b8;'></div>"
}
]
}
]
}
]
}Result:
You are not able to see the gray part in bar chart, because value of gray bar is 100% and value of green bars are greater than 100%.
Try adding target value in first value panel (with gray color) and current sales in second value panel (green bar)
-Hari
