Waterfall chart

Chart styletype: "chart"

Generate waterfall chart images for cash-flow bridges, P&L attribution and budget variance — pass the step deltas and render a fresh image per API call.

Edit it — this is the actual editor panel

Design JSON — “Waterfall” variant

{
  "title": "Chart sample",
  "description": "A dynamic bar chart",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-chart",
      "key": "sales",
      "type": "chart",
      "position": {
        "x": 140,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 520,
        "height": 300
      },
      "dynamic": true,
      "properties": {
        "chartType": "waterfall",
        "data": [
          5000,
          1800,
          -1200,
          900,
          -1500
        ],
        "labels": [
          "Start",
          "Sales",
          "Refunds",
          "Upsell",
          "Costs"
        ],
        "colors": [],
        "orientation": "vertical",
        "showAxis": true,
        "showGrid": true,
        "showValues": true,
        "valueFormat": "compact",
        "opacity": 1
      }
    }
  ]
}

Chart examples

Real renders of the waterfall chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Revenue to net profit bridge

Gross revenue stepped down through costs to net profit, currency-formatted.

API overrides for this example

{
  "sales.chartType": "waterfall",
  "sales.data": [
    120000,
    -38000,
    -22000,
    -14000,
    -9000
  ],
  "sales.labels": [
    "Revenue",
    "COGS",
    "Payroll",
    "Marketing",
    "Other"
  ],
  "sales.showValues": true,
  "sales.valueFormat": "currency",
  "sales.currencySymbol": "$",
  "sales.colors": [
    "#16A34A",
    "#DC2626"
  ]
}

Monthly cash-flow bridge

Opening balance adjusted by inflows and outflows to the closing balance.

API overrides for this example

{
  "sales.chartType": "waterfall",
  "sales.data": [
    8000,
    4200,
    -2600,
    1500,
    -3100
  ],
  "sales.labels": [
    "Open",
    "Income",
    "Rent",
    "Refunds",
    "Payroll"
  ],
  "sales.showValues": true,
  "sales.valueFormat": "compact"
}

When to use the waterfall style

Cash-flow bridge images for finance updates
Revenue-to-profit P&L attribution graphics
Budget vs actual variance in board reports

Use it dynamically via the API

Feed fresh numbers via '<key>.data' (or '<key>.series' for multi-series), and swap '<key>.labels' or '<key>.chartType' per render.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "sales.chartType": "waterfall",
    "sales.data": [
        5000,
        1800,
        -1200,
        900,
        -1500
    ],
    "sales.labels": [
        "Start",
        "Sales",
        "Refunds",
        "Upsell",
        "Costs"
    ],
    "sales.colors": [],
    "sales.orientation": "vertical",
    "sales.showAxis": true,
    "sales.showGrid": true,
    "sales.showValues": true,
    "sales.valueFormat": "compact",
    "sales.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other chart styles

Default Line Area Horizontal bars Stacked series 100% stacked Sparkline Multi-lineWaterfallLollipop Step line Slope Combo (dual-axis)

See the chart component page for the full property reference and FAQs.