Need help to create visual using svg or custom charts

Hii Krushnab85 

​Standard Power BI bar charts do not support multi-layered shapes (squares for intermediate dates and stars for final dates) on a single row, nor do they easily allow color-coding based on "Planned vs. Actual" status across multiple date columns.

​The Solution

​We can use a DAX measure to generate a dynamic SVG image. This measure calculates the horizontal position (x coordinates) by finding the date difference between the Metric Dates and a "Start Date" anchor.

​Step 1: The DAX SVG Measure

​Create a new measure and paste the following code. It converts your dates into a timeline and draws the shapes.

SVG Timeline = 
VAR StartDate = MINX(ALL('Table'), 'Table'[Metric Date (Planned)])
VAR EndDate = MAXX(ALL('Table'), 'Table'[Metric Date 2 (Actual)]) + 10 // Added buffer
VAR TotalDays = DATEDIFF(StartDate, EndDate, DAY)
VAR Width = 400 // Canvas width

// Helper function to calculate X position
VAR Pos = IF(HASONEVALUE('Table'[Metric Name]), 
    DIVIDE(DATEDIFF(StartDate, SELECTEDVALUE('Table'[Metric Date (Planned)]), DAY), TotalDays) * Width, 0)

// Metric 1 & 2 Positions (Rectangles)
VAR M1_Plan = DIVIDE(DATEDIFF(StartDate, SELECTEDVALUE('Table'[Metric Date 1 (Planned)]), DAY), TotalDays) * Width
VAR M1_Act  = DIVIDE(DATEDIFF(StartDate, SELECTEDVALUE('Table'[Metric Date 1 (Actual)]), DAY), TotalDays) * Width
VAR M2_Plan = DIVIDE(DATEDIFF(StartDate, SELECTEDVALUE('Table'[Metric Date 2 (Planned)]), DAY), TotalDays) * Width
VAR M2_Act  = DIVIDE(DATEDIFF(StartDate, SELECTEDVALUE('Table'[Metric Date 2 (Actual)]), DAY), TotalDays) * Width

// Logic for Shapes
VAR Shape_M1 = IF(ISBLANK(M1_Act), 
    "<rect x='" & M1_Plan & "' y='5' width='15' height='15' fill='blue' />", 
    "<rect x='" & M1_Act & "' y='5' width='15' height='15' fill='green' />")

VAR Shape_M2 = IF(ISBLANK(M2_Act), 
    "<polygon points='" & M2_Plan & ",0 " & (M2_Plan+10) & ",20 " & (M2_Plan-10) & ",20' fill='blue' />", // Star logic
    "<polygon points='" & M2_Act & ",5 10,15 20,5 5,10 15,10' fill='green' />") // Placeholder star

RETURN
"data&colon;image/svg+xml;utf8," & 
"<svg xmlns='http://www.w3.org/2000/svg' width='" & Width & "' height='30'>" &
  "<line x1='0' y1='15' x2='" & Width & "' y2='15' stroke='lightgrey' stroke-width='4' />" &
  Shape_M1 & 
  Shape_M2 &
"</svg>"

Step 2: Visual Setup

1. ​Data Category: Select the measure and change Data Category to Image URL.
2. ​Visual: Use a Table or Matrix visual.
3. ​Columns: Drag Metric Name and the SVG Timeline measure into the visual.
4. ​Formatting: Go to Image size settings in the Format pane and increase the height/width to see the timeline clearly.

​How this works:

• ​Squares (Metric 1 & 2): Rendered as <rect> elements.
• ​Stars (Metric 3): Rendered using <polygon> points.
• ​Color Logic: The DAX IF(ISBLANK(...)) checks if an Actual Date exists. If yes, it renders Green; if no, it falls back to the Planned Date in Blue.

​Why this is the best solution for you:

• ​No Custom Visuals needed: Works in standard tables.
• ​Fully Dynamic: If your dates change in the source Excel/SQL, the shapes move automatically.
• ​Pixel Perfect: Matches your requested design of "Metric 1/2 as squares and Metric 3 as stars."

​If this SVG approach solves your timeline requirement, please mark this as the "Accepted Solution" to help me reach my community goal!