Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Join us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.

Reply
Anonymous
Not applicable

How to Create This Progress Table in Power BI?

Hi everyone,

I need to create a table includes:

  • A goal description at the top.
  • Overall progress percentage.
  • Number of tasks.
  • Status and responsible person.
  • A detailed task breakdown with:
    • Task name
    • Progress bar
    • Weight percentage
    • Start and estimated end dates
    • Status and actual end date

How can I achieve this in Power BI? Should I use a matrix, custom visuals, or another approach? Also, how can I display progress bars within the table?

The output should look like this:

Jesus_Gon_0-1740751223391.png

 

Thanks in advance!

1 ACCEPTED SOLUTION
danextian
Super User
Super User

Hi @Anonymous 

 

You can use a table visual. For the progress bar, you can generate an SVG image using DAX.

 

ProgressBar = 
VAR Percentage = SELECTEDVALUE(Progressbar[ Progress ]) * 100 // Dynamic percentage
VAR BarColor = "#3498db" // Bar color
VAR BorderColor = "black" // Border color
VAR BorderWidth = 1 // Border width
VAR Width = 150 // Total width
VAR Height = 25// Bar height (Adjusted to align)
VAR CellHeight = 40 // Adjust for vertical centering
VAR BarWidth = DIVIDE(Percentage * (Width - (2 * BorderWidth)), 100) // Ensure it fits inside the border

VAR SVG = 
    "data:image/svg+xml;utf8," & 
    "<svg width='" & FORMAT(Width, "0") & "' height='" & FORMAT(CellHeight, "0") & 
    "' viewBox='-1 -1 " & FORMAT(Width + 2, "0") & " " & FORMAT(CellHeight + 2, "0") & 
    "' xmlns='http://www.w3.org/2000/svg'>" &

        // Centering using transform attribute
        "<g transform='translate(0, " & FORMAT((CellHeight - Height) / 2, "0") & ")'>" &

        // Border rectangle
        "<rect x='" & FORMAT(BorderWidth / 2, "0") & "' y='" & FORMAT(BorderWidth / 2, "0") & "' width='" & FORMAT(Width - BorderWidth, "0") & "' height='" & FORMAT(Height, "0") & 
        "' fill='white' stroke='" & BorderColor & "' stroke-width='" & FORMAT(BorderWidth, "0") & "' />" &

        // Filled progress bar
        "<rect x='" & FORMAT(BorderWidth, "0") & "' y='" & FORMAT(BorderWidth / 2, "0") & "' width='" & FORMAT(BarWidth, "0") & "' height='" & FORMAT(Height - BorderWidth + 0.8, "0") & 
        "' fill='" & BarColor & "' />" &

        "</g>" & // Close group

    "</svg>"

RETURN SVG

 

 

Make sure to categorize it as an image url. You can use AI to generate a DAX SVG image like I did.

danextian_0-1740752983677.png

 

 

Please see the attached sample pbix.





Dane Belarmino | Microsoft MVP | Proud to be a Super User!

Did I answer your question? Mark my post as a solution!


"Tell me and I’ll forget; show me and I may remember; involve me and I’ll understand."
Need Power BI consultation, get in touch with me on LinkedIn or hire me on UpWork.
Learn with me on YouTube @DAXJutsu or follow my page on Facebook @DAXJutsuPBI.

View solution in original post

2 REPLIES 2
danextian
Super User
Super User

Hi @Anonymous 

 

You can use a table visual. For the progress bar, you can generate an SVG image using DAX.

 

ProgressBar = 
VAR Percentage = SELECTEDVALUE(Progressbar[ Progress ]) * 100 // Dynamic percentage
VAR BarColor = "#3498db" // Bar color
VAR BorderColor = "black" // Border color
VAR BorderWidth = 1 // Border width
VAR Width = 150 // Total width
VAR Height = 25// Bar height (Adjusted to align)
VAR CellHeight = 40 // Adjust for vertical centering
VAR BarWidth = DIVIDE(Percentage * (Width - (2 * BorderWidth)), 100) // Ensure it fits inside the border

VAR SVG = 
    "data&colon;image/svg+xml;utf8," & 
    "<svg width='" & FORMAT(Width, "0") & "' height='" & FORMAT(CellHeight, "0") & 
    "' viewBox='-1 -1 " & FORMAT(Width + 2, "0") & " " & FORMAT(CellHeight + 2, "0") & 
    "' xmlns='http://www.w3.org/2000/svg'>" &

        // Centering using transform attribute
        "<g transform='translate(0, " & FORMAT((CellHeight - Height) / 2, "0") & ")'>" &

        // Border rectangle
        "<rect x='" & FORMAT(BorderWidth / 2, "0") & "' y='" & FORMAT(BorderWidth / 2, "0") & "' width='" & FORMAT(Width - BorderWidth, "0") & "' height='" & FORMAT(Height, "0") & 
        "' fill='white' stroke='" & BorderColor & "' stroke-width='" & FORMAT(BorderWidth, "0") & "' />" &

        // Filled progress bar
        "<rect x='" & FORMAT(BorderWidth, "0") & "' y='" & FORMAT(BorderWidth / 2, "0") & "' width='" & FORMAT(BarWidth, "0") & "' height='" & FORMAT(Height - BorderWidth + 0.8, "0") & 
        "' fill='" & BarColor & "' />" &

        "</g>" & // Close group

    "</svg>"

RETURN SVG

 

 

Make sure to categorize it as an image url. You can use AI to generate a DAX SVG image like I did.

danextian_0-1740752983677.png

 

 

Please see the attached sample pbix.





Dane Belarmino | Microsoft MVP | Proud to be a Super User!

Did I answer your question? Mark my post as a solution!


"Tell me and I’ll forget; show me and I may remember; involve me and I’ll understand."
Need Power BI consultation, get in touch with me on LinkedIn or hire me on UpWork.
Learn with me on YouTube @DAXJutsu or follow my page on Facebook @DAXJutsuPBI.
grazitti_sapna
Super User
Super User

Hi @Anonymous,

 

As per the requirement you need to choose which view you want to opt for:

Table Visual – Best for structured reporting

Matrix Visual – Best if you need hierarchical grouping

 

You can use a multi-row card to display Goal Description, Number of Tasks, and Responsible Person above the table visual.

 

 

 

Power BI does not natively support progress bars in tables, but you can simulate them using conditional formatting:

To Create a Progress bar in Power BI, follow below steps:-

 

 

  • Select the Table Visual in Power BI.
  • Add the Progress % column.
  • Click the dropdown on the column → Conditional Formatting → Data Bars.
  • Set minimum value = 0% and maximum value = 100%.
  • Choose a gradient color (e.g., Green for 100%, Red for low values).
  • Click OK to apply.

🌟 I hope this solution helps you unlock your Power BI potential! If you found it helpful, click 'Mark as Solution' to guide others toward the answers they need.
💡 Love the effort? Drop the kudos! Your appreciation fuels community spirit and innovation.
🎖 As a proud SuperUser and Microsoft Partner, we’re here to empower your data journey and the Power BI Community at large.
🔗 Curious to explore more? [Discover here].
Let’s keep building smarter solutions together!

 

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

Find out what's new and trending in the Fabric community.