Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

Graph with integrated arrows

Good day! 

 

We need to create a "combo chart" that contains a Column Chart with integrated arrows and that those arrows move and resize along the columns (y axis).  

Currently, we have a native Column Chart with symbols (not images) over it. The issue is that, when the column is smaller or below 0, the arrows don't move and resize along. 

 

Is there any native / custom visual that may solve the requirement? 

 

Regards, 

Images attached

 

 

 

Need Help

5 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    7 years ago

    Hi Anonymous 

    How is it working for you now?
    Consider using SVGs.

    You can set their properties (position,size,color,etc.) dynamically.

    Thanks!
    A

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      Hi, Anonymous! Thank you for your response. Can you give me a little more information about SVGs? Right now, the arrows are at a fixed position over the column chart. If the column chart changes because we get a below 0 value, the arrows stay at the same place. 

       

      Regards, 

      • Anonymous's avatar
        Anonymous
        Not applicable
        7 years ago

        Hi Anonymous 

         

        I did this solution as "quick and dirty". Feel free to take this idea and develop it to a better/nicer solution.

        Also, I am attaching the pbix file for reference.

         

        I have created 2 svg strings with different positions. This goes into a custom column.

        The code is:

        PRES ARROW = 
var A  =
"<svg xmlns='http://www.w3.org/2000/svg'>
		    <polygon points='2,30 22,30 11,50'
            style='stroke:#660000; fill:blue; stroke-width: 3;'/>
		    Sorry, your browser does not support inline SVG.
	  </svg>"

var B = 
"<svg xmlns='http://www.w3.org/2000/svg'>
		    <polygon points='2,0 22,0 11,20'
            style='stroke:#660000; fill:blue; stroke-width: 3;'/>
		    Sorry, your browser does not support inline SVG.
	  </svg>"

return IF(T2[PRESUPUESTO] < 0, A,B)

        Add the column into a HTML contianer (Download from marketplace)

        So, if the value of PRESUPUESTO is negative, the triangle will be below the X axis. Otherwise, above it (i.e. PRESUPUESTO is positive)

         

         

        Good Luck!
        A

  • Anonymous's avatar
    Anonymous
    Not applicable
    2 years ago

    Hi May I know how do you create the graph with integrated arrows ? I can't find any similar chart in power bi. Please guide me to do that so, much appreciate, Thanks.