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

Don't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.

Reply
amaddala
Helper I
Helper I

Modify SVG size for inline Sparklines in a Matrix visual

I am trying to create inline sparkline charts using embedded SVGs for a matrix in Power BI. Below is the code for formatting the image. However, the image is occupying the top left side of the cell instead of occupying the entire cell. I need to fix the image to occupy the entire cell instead.

 

VAR SVGImageURL = "data:image/svg+xml;utf8," &

"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100'>" &

"<polyline fill='none' stroke='" & LineColor & "' stroke-width='1' points='"& Lines &

"'/></svg>"

 

 I tried to change the "image height" in the "format" section in Visualizations pane but that doesnt change the width. I also tried to add width parameter to the Html but it doesnt seem to reflect in the image. Below is the image of my visual.

 

 

Visual.png

 

1 ACCEPTED SOLUTION
V-pazhen-msft
Community Support
Community Support

@amaddala 

Try add both width and height in the code, the range supported in power bi is 24px to 150px, so try 100 x 100 px. 

 

VAR SVGImageURL = "data&colon;image/svg+xml;utf8," &

"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100'>" &

"<polyline fill='none' stroke='" & LineColor & "' stroke-width='1' points='"& Lines &

"'/></svg>"

 

Paul Zheng _ Community Support Team
If this post helps, please Accept it as the solution to help the other members find it more quickly.

View solution in original post

2 REPLIES 2
V-pazhen-msft
Community Support
Community Support

@amaddala 

Try add both width and height in the code, the range supported in power bi is 24px to 150px, so try 100 x 100 px. 

 

VAR SVGImageURL = "data&colon;image/svg+xml;utf8," &

"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100'>" &

"<polyline fill='none' stroke='" & LineColor & "' stroke-width='1' points='"& Lines &

"'/></svg>"

 

Paul Zheng _ Community Support Team
If this post helps, please Accept it as the solution to help the other members find it more quickly.

amitchandak
Super User
Super User

@amaddala , have tried changing the viewbox parameters

Join us as experts from around the world come together to shape the future of data and AI!
At the Microsoft Analytics Community Conference, global leaders and influential voices are stepping up to share their knowledge and help you master the latest in Microsoft Fabric, Copilot, and Purview.
️ November 12th-14th, 2024
 Online Event
Register Here

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Jan25PBI_Carousel

Power BI Monthly Update - January 2025

Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.

Jan NL Carousel

Fabric Community Update - January 2025

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