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     

Hrtfkr's avatar
Hrtfkr
Regular Visitor
4 months ago

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?

  • 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