Underwater drawdown: depth below the peak
The classic trading underwater curve: a red gradient area shows the distance from the equity peak, with a dashed rule and label anchored on the maximum drawdown.
Prerequisites
Vega-Lite v5
Vega-Lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{ "jour": "2026-05-04", "dd": 0 },
{ "jour": "2026-05-05", "dd": -0.6 },
{ "jour": "2026-05-06", "dd": -1.4 },
{ "jour": "2026-05-07", "dd": -0.9 },
{ "jour": "2026-05-08", "dd": -2.3 },
{ "jour": "2026-05-11", "dd": -3.1 },
{ "jour": "2026-05-12", "dd": -2.7 },
{ "jour": "2026-05-13", "dd": -4.2 },
{ "jour": "2026-05-14", "dd": -5.0 },
{ "jour": "2026-05-15", "dd": -6.1 },
{ "jour": "2026-05-18", "dd": -5.4 },
{ "jour": "2026-05-19", "dd": -7.2 },
{ "jour": "2026-05-20", "dd": -8.2 },
{ "jour": "2026-05-21", "dd": -7.6 },
{ "jour": "2026-05-22", "dd": -6.3 },
{ "jour": "2026-05-25", "dd": -5.1 },
{ "jour": "2026-05-26", "dd": -4.0 },
{ "jour": "2026-05-27", "dd": -2.8 },
{ "jour": "2026-05-28", "dd": -1.5 },
{ "jour": "2026-05-29", "dd": -0.4 }
]
},
"height": 260,
"encoding": {
"x": { "field": "jour", "type": "temporal", "title": null },
"y": { "field": "dd", "type": "quantitative", "title": "Drawdown (%)", "scale": { "domain": [-10, 0] } }
},
"layer": [
{
"mark": {
"type": "area",
"interpolate": "monotone",
"line": { "color": "#ff5f56", "strokeWidth": 2 },
"color": {
"gradient": "linear", "x1": 1, "y1": 0, "x2": 1, "y2": 1,
"stops": [
{ "offset": 0, "color": "rgba(255,95,86,0.05)" },
{ "offset": 1, "color": "rgba(255,95,86,0.45)" }
]
},
"tooltip": true
},
"encoding": {
"tooltip": [
{ "field": "jour", "type": "temporal", "format": "%d/%m", "title": "Jour" },
{ "field": "dd", "type": "quantitative", "format": ".1f", "title": "Drawdown (%)" }
]
}
},
{
"mark": { "type": "rule", "color": "#ff5f56", "strokeDash": [5, 4] },
"encoding": { "y": { "datum": -8.2 } }
},
{
"mark": { "type": "text", "align": "left", "dx": 4, "dy": 12, "color": "#ff5f56", "fontWeight": "bold", "text": "Max drawdown −8,2 %" },
"encoding": { "y": { "datum": -8.2 }, "x": { "value": 0 } }
}
]
}TradingDrawdownareaAnnotation