Custom Sisense Bar Chart using Blox Progress Bar not working

[Lisha]

I want a Progress Bar that will display my current sales in comparison to the target. I found a similar tutorial and followed it exactly
This is the tutorial I followed :
https://profusion.com/insights/custom-bar-charts-in-sisense-blox-with-diego-cordero/

I have watched the youtube video for the same and used the exact code snippet from this blog. I am unable to get the progress bar configured correctly after trying several times. The purple tooltip is pointing before the progress bar even starts and seems static. Below is a screenshot for reference.

Please let me know what I am doing wrong and how to correct it.

[harikm007]

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 :

https://community.sisense.com/t5/build-analytics/formatting-stack-100-bar-chart/m-p/3463/highlight/t...

-Hari

[Lisha]

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

[harikm007]

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