Fun with SVGs – Line Chart Card

I am having a lot of fun learning SVGs. I had used them before in various things, but I only really new enough to do very, very basic things.

I have made a few other SVGs cards in the past for Power BI and I have been reading a lot about lines, so I decided to try my luck on that.

The requirements:

• I wanted to dynamically draw the line based on a table of values.
• I wanted to measure the points on the line against a target.
• I wanted to also put colored circles at the points, indicating whether it met or did not meet the target.
• I also wanted to add a dashed reference line where the target was.

I was able to do it, but it took some figuring out. Again, I used tables to dynamically generate the polyline points and the circles. If a point was under the target, I was able to conditionally add a column to determine the fill color (in this example red for under target, green for meeting or exceeding target).

Using tables and CONCATENATEX() has really been handy in making dynamic SVG cards in Power BI as well as ADDCOLUMNS(). There may be a more artful way to get this done, but so far it is working for me.

Below is a gist with my example. Enjoy!

https://gist.github.com/cbaragao/d39f14812260cf4ec267c808908cbeed