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

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