Waterfall Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

		        <style>
		            .skt-wf-bg{position:relative;}
		            .skt-wf-card{position:relative;}
		            .skt-wf-chart{width:100%;}
		            .skt-wf-legend{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:13px;}
		            .skt-wf-item{display:inline-flex;align-items:center;gap:7px;}
		            .skt-wf-box{width:16px;height:16px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.15);}
		            .skt-wf-tip{position:absolute;display:none;pointer-events:none;z-index:9999;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.2);padding:5px 9px;font-family:Arial,sans-serif;font-size:13px;line-height:1.5;white-space:nowrap;}
		            @media (max-width:600px){ .skt-wf-legend{gap:10px;font-size:12px;} }
		        </style>
		    <div class="skt-wf-bg">
		        <div class="skt-wf-card">
		            <div id="waterfallchart_1" class="skt-wf-chart"></div>
		        </div>
		        <div class="skt-wf-legend" style="color:#00000;"><span class="skt-wf-item"><span class="skt-wf-box" style="background:#00ff00;"></span>Rising (close > open)</span><span class="skt-wf-item"><span class="skt-wf-box" style="background:#ff0000;"></span>Falling (close < open)</span><span class="skt-wf-item"><span class="skt-wf-box" style="background:#FBBC05;"></span>Low</span><span class="skt-wf-item"><span class="skt-wf-box" style="background:#4285F4;"></span>Open</span><span class="skt-wf-item"><span class="skt-wf-box" style="background:#FF6D01;"></span>Close</span><span class="skt-wf-item"><span class="skt-wf-box" style="background:#46BDC6;"></span>High</span></div>
		    </div>

		    <script>
		    (function(){
		        window.sktWfCharts = window.sktWfCharts || [];

		        google.charts.load("current", {packages:["corechart"]});
		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("waterfallchart_1");
		            if(!el){ return; }

		            var card = el.parentNode;
		            var TIPS = ["<div style=\"font-weight:bold;color:#222;margin-bottom:2px;\">Mon<\/div><div style=\"color:#FBBC05;\">28<\/div><div style=\"color:#4285F4;\">28<\/div><div style=\"color:#FF6D01;\">38<\/div><div style=\"color:#46BDC6;\">38<\/div>","<div style=\"font-weight:bold;color:#222;margin-bottom:2px;\">Tue<\/div><div style=\"color:#FBBC05;\">38<\/div><div style=\"color:#4285F4;\">38<\/div><div style=\"color:#FF6D01;\">55<\/div><div style=\"color:#46BDC6;\">55<\/div>","<div style=\"font-weight:bold;color:#222;margin-bottom:2px;\">Wed<\/div><div style=\"color:#FBBC05;\">55<\/div><div style=\"color:#4285F4;\">55<\/div><div style=\"color:#FF6D01;\">77<\/div><div style=\"color:#46BDC6;\">77<\/div>","<div style=\"font-weight:bold;color:#222;margin-bottom:2px;\">Thu<\/div><div style=\"color:#FBBC05;\">77<\/div><div style=\"color:#4285F4;\">77<\/div><div style=\"color:#FF6D01;\">66<\/div><div style=\"color:#46BDC6;\">66<\/div>","<div style=\"font-weight:bold;color:#222;margin-bottom:2px;\">Fri<\/div><div style=\"color:#FBBC05;\">66<\/div><div style=\"color:#4285F4;\">66<\/div><div style=\"color:#FF6D01;\">22<\/div><div style=\"color:#46BDC6;\">22<\/div>"];

		            var data = new google.visualization.DataTable();
		            data.addColumn("string", "Day");
		            data.addColumn("number", "Low");
		            data.addColumn("number", "Open");
		            data.addColumn("number", "Close");
		            data.addColumn("number", "High");
		            data.addRows([["Mon",28,28,38,38],["Tue",38,38,55,55],["Wed",55,55,77,77],["Thu",77,77,66,66],["Fri",66,66,22,22]]);

		            var chart = new google.visualization.CandlestickChart(el);

		            var tip = document.createElement("div");
		            tip.className = "skt-wf-tip";
		            card.appendChild(tip);

		            var lastX = 0, lastY = 0;

		            function positionTip(){
		                var cw = card.clientWidth, tw = tip.offsetWidth, th = tip.offsetHeight;
		                var x = lastX + 14;
		                if(x + tw > cw) x = lastX - tw - 14;
		                if(x < 2) x = 2;
		                var y = lastY - th - 12;
		                if(y < 0) y = lastY + 18;
		                tip.style.left = x + "px";
		                tip.style.top  = y + "px";
		            }

		            card.addEventListener("mousemove", function(e){
		                var r = card.getBoundingClientRect();
		                lastX = e.clientX - r.left;
		                lastY = e.clientY - r.top;
		                if(tip.style.display === "block"){ positionTip(); }
		            });

		            google.visualization.events.addListener(chart, "onmouseover", function(ev){
		                if(ev.row == null || !TIPS[ev.row]){ return; }
		                tip.innerHTML = TIPS[ev.row];
		                tip.style.display = "block";
		                positionTip();
		            });
		            google.visualization.events.addListener(chart, "onmouseout", function(){
		                tip.style.display = "none";
		            });

		            google.visualization.events.addListener(chart, "select", function(){
		                chart.setSelection([]);
		            });

		            function draw(){
		                var w = el.clientWidth || el.offsetWidth || 600;
		                var h = Math.round(Math.max(320, Math.min(500, w * 0.55)));
		                var small = w < 520;

		                chart.draw(data, {
		                    legend: "none",
		                    height: h,
		                    tooltip: { trigger: "none" },
		                    backgroundColor: { fill: "transparent" },
		                    bar: { groupWidth: "70%" },
		                    candlestick: {
		                        risingColor:  { strokeWidth: 1, stroke: "#00ff00",  fill: "#00ff00" },
		                        fallingColor: { strokeWidth: 1, stroke: "#ff0000", fill: "#ff0000" }
		                    },
		                    hAxis: { textStyle: { color: "#00000", fontSize: small ? 10 : 12 } },
		                    vAxis: {
		                        textStyle: { color: "#00000", fontSize: small ? 10 : 12 },
		                        gridlines: { color: "rgba(0,0,0,0.10)" },
		                        minorGridlines: { color: "rgba(0,0,0,0.04)" }
		                    },
		                    chartArea: { width: small ? "82%" : "88%", height: "72%", backgroundColor: "transparent" }
		                });
		            }

		            draw();
		            window.sktWfCharts.push(draw);

		            if(!window.sktWfResizeBound){
		                window.sktWfResizeBound = true;
		                var t;
		                window.addEventListener("resize", function(){
		                    clearTimeout(t);
		                    t = setTimeout(function(){ window.sktWfCharts.forEach(function(fn){ fn(); }); }, 200);
		                });
		            }
		        });
		    })();
		    </script>

[skillwrapper type="skt_waterfallchart" risingcolor="#00ff00" fallingcolor="#ff0000" text_color="#00000"]

[skill title="Mon" low="28" open="28" close="38" high="38"]

[skill title="Tue" low="38" open="38" close="55" high="55"]

[skill title="Wed" low="55" open="55" close="77" high="77"]

[skill title="Thu" low="77" open="77" close="66" high="66"]

[skill title="Fri" low="66" open="66" close="22" high="22"]

[/skillwrapper]

Rising (close > open)Falling (close < open)LowOpenCloseHigh