Forum Discussion

Hrtfkr's avatar
Hrtfkr
Regular Visitor
4 months ago
Solved

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 downloade...
Need Help
  • v-ssriganesh's avatar
    v-ssriganesh
    4 months ago

    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     

v-ssriganesh's avatar
v-ssriganesh
Community Support
4 months ago

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.

Hrtfkr's avatar
Hrtfkr
Regular Visitor
4 months ago

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.

  • v-ssriganesh's avatar
    v-ssriganesh
    Community Support
    4 months ago

    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