Forum Discussion
Embedding bullet chart in a table
Hello,
Wanted to know if we can have a bullet chart inside a table similar to this in power bi
Usually this is done through svg. I'd recommend using the template code from Kerry Kolosko. She's one of the best in custom visuals.
Hi Harika05 , We do not have an inbuilt feature for bullet charts; we will need to use the SVG approach.
Sample Data:Op:
DAX:Bullet Chart SVG = VAR Actual = SUM('SalesDataSVG'[ActualSales]) VAR Target = SUM('SalesDataSVG'[SalesTarget]) VAR W = 200 VAR H = 40 -- Target is ALWAYS full width — actual fills % of that VAR Pct = DIVIDE(Actual, Target, 0) VAR ActW = ROUND(MIN(Pct, 1) * W, 0) -- Overshoot when actual > target VAR OverW = IF(Actual > Target, ROUND((Pct - 1) * W, 0), 0) -- Heights — target wide, actual narrow VAR TgtH = 22 VAR ActH = 9 VAR TgtY = (H - TgtH) / 2 VAR ActY = (H - ActH) / 2 VAR ActColor = IF(Actual >= Target, "#1D6A3A", IF(Actual >= Target * 0.85, "#1A4F7A", "#922B21")) RETURN "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg'" & " viewBox='0 0 " & (W + 20) & " " & H & "'" & " preserveAspectRatio='xMinYMid meet'" & " width='" & (W + 20) & "' height='" & H & "'>" & -- 1. Grey track — always full W "<rect x='0' y='" & TgtY & "' width='" & W & "' height='" & TgtH & "'" & " fill='#D5D8DC' rx='4'/>" & -- 2. Light blue target bar — always full W "<rect x='0' y='" & TgtY & "' width='" & W & "' height='" & TgtH & "'" & " fill='#AED6F1' rx='4'/>" & -- 3. Narrow actual bar — fills only its % of target width "<rect x='0' y='" & ActY & "' width='" & ActW & "' height='" & ActH & "'" & " fill='" & ActColor & "' rx='3'/>" & -- 4. Overshoot bar — extends beyond W when actual > target IF(Actual > Target, "<rect x='" & W & "' y='" & ActY & "' width='" & OverW & "' height='" & ActH & "'" & " fill='#1D6A3A' rx='2'/>", "") & -- 5. Right edge target boundary marker "<rect x='" & (W - 3) & "' y='" & (TgtY - 4) & "' width='3' height='" & (TgtH + 8) & "'" & " fill='#2C3E50' rx='1'/>" & "</svg>"
Sample PBIX:
Rag status.pbix
If you found this helpful, please consider giving it a kudo and marking it as the accepted solution — it goes a long way in helping others facing the same issue.
For more Power BI tips and discussions, let’s connect on LinkedIn:
https://www.linkedin.com/in/natarajan-manivasagan
Cheers!
4 Replies
- Natarajan_M
Super User
Hi Harika05 , We do not have an inbuilt feature for bullet charts; we will need to use the SVG approach.
Sample Data:Op:
DAX:Bullet Chart SVG = VAR Actual = SUM('SalesDataSVG'[ActualSales]) VAR Target = SUM('SalesDataSVG'[SalesTarget]) VAR W = 200 VAR H = 40 -- Target is ALWAYS full width — actual fills % of that VAR Pct = DIVIDE(Actual, Target, 0) VAR ActW = ROUND(MIN(Pct, 1) * W, 0) -- Overshoot when actual > target VAR OverW = IF(Actual > Target, ROUND((Pct - 1) * W, 0), 0) -- Heights — target wide, actual narrow VAR TgtH = 22 VAR ActH = 9 VAR TgtY = (H - TgtH) / 2 VAR ActY = (H - ActH) / 2 VAR ActColor = IF(Actual >= Target, "#1D6A3A", IF(Actual >= Target * 0.85, "#1A4F7A", "#922B21")) RETURN "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg'" & " viewBox='0 0 " & (W + 20) & " " & H & "'" & " preserveAspectRatio='xMinYMid meet'" & " width='" & (W + 20) & "' height='" & H & "'>" & -- 1. Grey track — always full W "<rect x='0' y='" & TgtY & "' width='" & W & "' height='" & TgtH & "'" & " fill='#D5D8DC' rx='4'/>" & -- 2. Light blue target bar — always full W "<rect x='0' y='" & TgtY & "' width='" & W & "' height='" & TgtH & "'" & " fill='#AED6F1' rx='4'/>" & -- 3. Narrow actual bar — fills only its % of target width "<rect x='0' y='" & ActY & "' width='" & ActW & "' height='" & ActH & "'" & " fill='" & ActColor & "' rx='3'/>" & -- 4. Overshoot bar — extends beyond W when actual > target IF(Actual > Target, "<rect x='" & W & "' y='" & ActY & "' width='" & OverW & "' height='" & ActH & "'" & " fill='#1D6A3A' rx='2'/>", "") & -- 5. Right edge target boundary marker "<rect x='" & (W - 3) & "' y='" & (TgtY - 4) & "' width='3' height='" & (TgtH + 8) & "'" & " fill='#2C3E50' rx='1'/>" & "</svg>"
Sample PBIX:
Rag status.pbix
If you found this helpful, please consider giving it a kudo and marking it as the accepted solution — it goes a long way in helping others facing the same issue.
For more Power BI tips and discussions, let’s connect on LinkedIn:
https://www.linkedin.com/in/natarajan-manivasagan
Cheers! - MasonMA
Super User
Usually this is done through svg. I'd recommend using the template code from Kerry Kolosko. She's one of the best in custom visuals.
- v-dineshya
Community Support
HI Harika05 ,
Thank you for reaching out to the Microsoft Community Forum.
Hi MasonMA and Natarajan_M , Thank you for your prompt responses.
Hi Harika05 , could you please try the proposed solutions shared by MasonMA and Natarajan_M ? Let us know if you’re still facing the same issue we’ll be happy to assist you further.
Regards,
Dinesh
- v-dineshya
Community Support
Hi Harika05 ,
We haven’t heard from you on the last response and was just checking back to see if you have a resolution yet. And, if you have any further query do let us know.
Regards,
Dinesh