Forum Discussion
Gradient Area Chart
Hey all,
I’m kinda losing my mind over this
I’m trying to get a gradient working in Power BI and nothing seems to behave the way it should. I’ve watched a bunch of tutorials, even downloaded sample reports where gradients supposedly work fine.
At this point I started debugging everything - thought maybe my measures are broken, but nope… it really looks like the issue is with the SVG itself.
No matter what I do, I keep getting these weird vertical bars on the left and right edges when I use the gradient.
Is there some trick to making SVG gradients actually work properly in Power BI?
Or more specifically - how do you get rid of those edge lines?
Hello Hrtfkr,
Thank you for your response.
The SVG in this scenario is generated within the DAX measure; however, you can extract and reuse it as a standalone .svg file.
Please find the SVG content below. You can copy this into a text file and save it with a .svg extension to view or use it outside Power BI:
<svg viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#00FFAA" stop-opacity="0.6"/> <stop offset="100%" stop-color="#00FFAA" stop-opacity="0"/> </linearGradient> </defs> <path d=" M 1 100 L 50 80 L 100 90 L 150 70 L 200 85 L 250 60 L 299 20 L 299 149 L 1 149 Z " fill="url(#grad)" stroke="none"/> </svg>You can modify the path coordinates to match your dataset if needed.
Best regards,
Ganesh Singamshetty
8 Replies
Hi Hrtfkr,
Thank you for posting your query in the Microsoft Fabric Community Forum.
In Power BI, SVG files are supported as images when they are used through the Image URL data category. SVGs are rendered in supported visuals (such as tables, matrices, slicers, and cards) the same way as other image formats, and Power BI does not treat them as native vector visuals.The official documentation does not describe or guarantee support for advanced SVG features beyond image rendering. Any SVG behavior is therefore subject to the same limitations that apply to image rendering in Power BI.
For supported usage and considerations when working with SVG images in Power BI, please refer to the official documentation below.
Official Microsoft documentation:
https://learn.microsoft.com/power-bi/create-reports/power-bi-images-tables
Best regards,
Ganesh Singamshetty.Hello Hrtfkr,
We hope you're doing well. Could you please confirm whether your issue has been resolved or if you're still facing challenges? Your update will be valuable to the community and may assist others with similar concerns.
Thank you.
Hello everyone,
Appreciate the efforts so far - but issue is not resolved unfortunetly.
I tried aswell with LLMs to trim the edges but it does not work either way.
I watched few youtube tutorials, followed exact steps but cannot reproduce it to make the SVG fit nicely.
For instance: https://www.youtube.com/watch?v=WYCYD5KG0rQ
Any other suggestions what I am doing wrong?Hello Hrtfkr,
I was able to reproduce your scenario on my end and observed the same behavior initially. After adjusting the SVG (specifically the path boundaries, gradient stops, and removing the stroke), the issue with the unwanted edge lines was resolved, and the gradient rendered as expected.
The output now displays a smooth gradient area without the vertical bars on the edges. For your reference, I’m also attaching the .pbix file used for testing. Please review and let me know if you have any further questions.
Best regards,
Ganesh Singamshetty.That's great! Appreciate your effort. Would you mind sending me the underlying .svg file aswell? I would not be likely able to extract it from the .pbix file itself.
Hello Hrtfkr,
Could you please confirm whether your issue has been resolved or if you're still facing challenges? Your update will be valuable to the community and may assist others with similar concerns.
Thank you.
