Max_Drawdown_Comparison = html`
<div style="font-family: sans-serif; width: 800px; padding: 20px;">
<h3 style="margin: 0 0 12px;">Maximum Drawdown Comparison: FY '25</h3>
<!-- Legend -->
<div style="display: flex; justify-content: flex-start; gap: 24px; font-size: 14px; margin-bottom: 12px;">
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#e24630;margin-right:6px;border-radius:3px;"></span>
Nifty Smallcap 100
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#fcc842;margin-right:6px;border-radius:3px;"></span>
Nifty Midcap 100
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#007aff;margin-right:6px;border-radius:3px;"></span>
Nifty 50
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#f58024;margin-right:6px;border-radius:3px;"></span>
Scripbox Recommended
</div>
</div>
<!-- Plot -->
${Plot.plot({
marks: [
Plot.barY(reorderedDrawdownData, {
x: "Index",
y: "Drawdown",
fill: d => {
if (d.Index === "Nifty Smallcap 100") return "#e24630";
if (d.Index === "Nifty Midcap 100") return "#fcc842";
if (d.Index === "Nifty 50") return "#007aff";
if (d.Index === "Scripbox Recommended") return "#f58024";
},
width: 40
}),
Plot.text(reorderedDrawdownData, {
x: "Index",
y: d => d.Drawdown / 2,
text: d => `${d.Drawdown}%`,
fill: "white",
fontWeight: "bold",
textAnchor: "middle",
dy: 0,
fontSize: 14
})
],
x: {
label: null,
domain: ["Nifty Smallcap 100", "Nifty Midcap 100", "Nifty 50", "Scripbox Recommended"]
},
y: {
domain: [-40, 0],
tickFormat: d => `${d}%`,
label: null
},
width: 760,
height: 420,
marginBottom: 60
})}
</div>
`