In the example above, Annual Cost is taken as maximum value for the year and is represented by the dark blue bar.

Cost YTD is represented by the light blue bar, Budget YTD is represented by the purple line.

The code to create this chart can be broken down into 4 elements:

<table width='100%'><tr><td>

<svg width='100%' height='80'>

<rect fill='#ffffff' width='100%' height='100%' />

</svg>

</td></tr></table>

2. The dark blue bar, which represents the maximum value (Annual Cost)

 

<rect fill='#00008b' width='<%=(Annual Cost/(Max(Budget YTD,Annual Cost)))*100%>%' height='80%' y='10%' />

Max(Budget YTD,Annual Cost) -> returns the greater value of the both Metrics.
In this case, Annual Cost is bigger than Budget YTD.
(In the below example, Max(Budget YTD,Annual Cost) is always treated as returning Annual Cost.)

Max Value is used for each of the three elements (dark blue bar, light blue bar,purple line) and sets them in % relation to each other.

 

Annual Cost:

%=(Annual Cost/(Max(Budget YTD,Annual Cost)))*100%>%

%=$39,9/(39,9*100%)=100%

3. The light blue bar (Cost YTD)

<rect fill='#6495ed' width='<%=(Cost YTD/(Max(Budget YTD,Annual Cost)))*100%>%' height='60%' y='20%' />

Cost YTD:
%=(Cost YTD/(Max(Budget YTD,Annual Cost)))*100%>%
%=$16,6/(39,9*100%=~42%

<rect fill='#7b68ee' width='4' height='80%' x='<%=(Min(0.992,Budget YTD/(Max(Budget YTD,Annual Cost)))*100)%>%' y='10%' />

Budget YTD:
%=(Min(0.992,Budget YTD/(Max(Budget YTD,Annual Cost)))*100)%>%

The calculation returns the smaller value between 0.992 and Budget YTD/(Annual Cost*100).
This means, if the purple line value would exceed the dark blue bar, the purple line would represent 100%.

Min(0.992,[16,0/(39,9*100)]
Min(0.992,0.04) -> ~40%

The full code:

<table width='100%'><tr><td>
<svg width='100%' height='80'>
<rect fill='#ffffff' width='100%' height='100%' />

<rect fill='#00008b' width='<%=(Annual Cost/(Max(Budget YTD,Annual Cost )))*100%>%' height='80%' y='10%' />

<rect fill='#6495ed' width='<%=(Cost YTD/(Max(Annual Cost,Budget YTD)))*100%>%' height='60%' y='20%' />

<rect fill='#7b68ee' width='4' height='80%' x='<%=(Min(0.992,Budget YTD/(Max(Annual Cost,Budget YTD)))*100)%>%' y='10%' />

</svg>

</td></tr></table>