{ "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": { "values": [ { "amount": 4000, "label": "Begin" }, { "amount": 1707, "label": "Jan" }, { "amount": -1425, "label": "Feb" }, { "amount": -1030, "label": "Mar" }, { "amount": 1812, "label": "Apr" }, { "amount": -1067, "label": "May" }, { "amount": -1481, "label": "Jun" }, { "amount": 1228, "label": "Jul" }, { "amount": 1176, "label": "Aug" }, { "amount": 1146, "label": "Sep" }, { "amount": 1205, "label": "Oct" }, { "amount": -1388, "label": "Nov" }, { "amount": 1492, "label": "Dec" }, { "amount": 0, "label": "End" } ] }, "description": "Waterfall chart of monthly profit and loss", "encoding": { "x": { "field": "label", "sort": null, "title": "Months", "type": "ordinal" } }, "height": 450, "layer": [ { "encoding": { "color": { "condition": [ { "test": "datum.label === 'Begin' || datum.label === 'End'", "value": "#f7e0b6" }, { "test": "datum.sum < datum.previous_sum", "value": "#f78a64" } ], "value": "#93c4aa" }, "y": { "field": "previous_sum", "title": "Amount", "type": "quantitative" }, "y2": { "field": "sum" } }, "mark": { "size": 45, "type": "bar" } }, { "encoding": { "x2": { "field": "lead" }, "y": { "field": "sum", "type": "quantitative" } }, "mark": { "color": "#404040", "opacity": 1, "strokeWidth": 2, "type": "rule", "x2Offset": 22.5, "xOffset": -22.5 } }, { "encoding": { "text": { "field": "sum_inc", "type": "nominal" }, "y": { "field": "sum_inc", "type": "quantitative" } }, "mark": { "color": "#404040", "dy": -8, "fontWeight": "bold", "type": "text" } }, { "encoding": { "text": { "field": "sum_dec", "type": "nominal" }, "y": { "field": "sum_dec", "type": "quantitative" } }, "mark": { "baseline": "top", "color": "#404040", "dy": 8, "fontWeight": "bold", "type": "text" } }, { "encoding": { "color": { "condition": { "test": "datum.label === 'Begin' || datum.label === 'End'", "value": "#725a30" }, "value": "white" }, "text": { "field": "text_amount", "type": "nominal" }, "y": { "field": "center", "type": "quantitative" } }, "mark": { "baseline": "middle", "fontWeight": "bold", "type": "text" } } ], "transform": [ { "window": [ { "as": "sum", "field": "amount", "op": "sum" } ] }, { "window": [ { "as": "lead", "field": "label", "op": "lead" } ] }, { "as": "lead", "calculate": "datum.lead === null ? datum.label : datum.lead" }, { "as": "previous_sum", "calculate": "datum.label === 'End' ? 0 : datum.sum - datum.amount" }, { "as": "amount", "calculate": "datum.label === 'End' ? datum.sum : datum.amount" }, { "as": "text_amount", "calculate": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount" }, { "as": "center", "calculate": "(datum.sum + datum.previous_sum) / 2" }, { "as": "sum_dec", "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''" }, { "as": "sum_inc", "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''" } ], "width": 800 }