Vega

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

Related snippets

Back to the Data Lab