cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
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
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

Super User IV
Super User IV

@amaddala , have tried changing the viewbox parameters



Did I answer your question? Mark my post as a solution! Appreciate your Kudos!!
Dashboard of My Blogs !! YouTube Channel !! Connect on Linkedin

Proud to be a Super User!

Helpful resources

Announcements
secondImage

Experience what’s next for Power BI

Join us for an in-depth look at the new Power BI features and capabilities at the free Microsoft Business Applications Launch Event.

secondImage

Power BI Women

Join our monthly meetings and learning sessions.

secondImage

Congratulations!

We are excited to announce the Power BI Super Users!

secondImage

The largest Power BI virtual conference

100+ sessions, 100+ speakers, Product managers, MVPs, and experts. All about Power BI. Attend online or watch the recordings.

Top Solution Authors
Top Kudoed Authors