Need help to create visual using svg or custom charts

Can you provide more detail about the visual?

Can you share your questions? 

Hi Krushnab85,
Thank you for posting your query in the Microsoft Fabric Community Forum.

Power BI does not natively support creating a single visual that combines multiple custom shapes (such as rectangles and stars) positioned on a date-based timeline within standard bar or column charts.

If this type of visualization is required for your scenario, we recommend submitting this requirement to the Ideas forum: https://community.fabric.microsoft.com/t5/Ideas/ct-p/PBI_Comm_Ideas, where the product team can review it and track customer demand for potential future enhancements.

Thank you for your understanding.

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!

Hii Krushnab85 

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