Bubble Graph

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

<?php
echo 'Hello, world!';

		        <style>
		            .skt-bubble-wrap{position:relative;width:100%;height:clamp(300px,60vw,480px);}
		            @keyframes sktBubbleAurora{ to{ transform:rotate(360deg); } }
		            @media (max-width:600px){ .skt-bubble-bg{padding:10px;border-radius:12px;} .skt-bubble-card{padding:6px;} }
		            @media (prefers-reduced-motion:reduce){ .skt-bubble-bg::before{animation:none;} }
		        </style>
		    <div class="skt-bubble-bg">
		        <div class="skt-bubble-card">
		            <div class="skt-bubble-wrap">
		                <canvas id="bubble_chart_1"></canvas>
		            </div>
		        </div>
		    </div>

		    <script>
		    document.addEventListener("DOMContentLoaded", function(){
		        var ctx = document.getElementById("bubble_chart_1");
		        if(!ctx){ return; }

		        new Chart(ctx, {
		            type:"bubble",
		            data:{
		                datasets:[{
		                    label:"Sales Report",
		                    data:[{"x":20,"y":30,"r":5.19000000000000039079850466805510222911834716796875,"_origR":15},{"x":40,"y":10,"r":4,"_origR":10},{"x":60,"y":50,"r":6.9199999999999999289457264239899814128875732421875,"_origR":20},{"x":80,"y":100,"r":45,"_origR":130}],
		                    backgroundColor:"rgba(250,110,110,0.55)",
		                    borderColor:"rgba(250,110,110,1)",
		                    borderWidth:1.5
		                }]
		            },
		            options:{
		                responsive:true,
		                maintainAspectRatio:false,
		                layout:{ padding: 57 },
		                plugins:{
		                    legend:{ labels:{ color:"rgba(250,110,110,1)" } },
		                    tooltip:{ callbacks:{ label:function(c){
		                        return "(" + c.raw.x + ", " + c.raw.y + ")  r:" + c.raw._origR;
		                    } } }
		                },
		                scales:{
		                    x:{ grid:{ color:"rgba(0,0,0,.08)" }, ticks:{ color:"#475569" }, title:{ display:true, text:"X axis", color:"rgba(250,110,110,1)" } },
		                    y:{ grid:{ color:"rgba(0,0,0,.08)" }, ticks:{ color:"#475569" }, title:{ display:true, text:"Y axis", color:"rgba(250,110,110,1)" } }
		                },
		                animation:{ duration:100, easing:"easeOutQuart" }
		            }
		        });
		    });
		    </script>

[skillwrapper type="skt_bubblegraph" chart_color="#fa6e6e" label="Sales Report" max_radius="45" x_label="X axis" y_label="Y axis"]

[skill x="20" y="30" r="15"]

[skill x="40" y="10" r="10"]

[skill x="60" y="50" r="20"]

[skill x="80" y="100" r="130"]

[/skillwrapper]