Polar Graph

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

<?php
echo 'Hello, world!';

		    <div class="skt-poly-wrap" style="position:relative;width:100%;max-width:580px;margin:0 auto;">
		        <canvas id="skt_skills_polychart_1" role="img" aria-label="polar area chart"></canvas>
		    </div>
		    <script>
		    (function(){
		        document.addEventListener("DOMContentLoaded", function(){
		            var el = document.getElementById("skt_skills_polychart_1");
		            if(!el){ return; }

		            new Chart(el.getContext("2d"), {
		                type: "polarArea",
		                data: {
		                    labels: ["WordPress","JavaScript","PHP"],
		                    datasets: [{
		                        label: "",
		                        data: [51,70,40],
		                        backgroundColor: ["#6adcfa","#fa6e6e","#336699"]
		                    }]
		                },
		                options: {
		                    responsive: true,
		                    maintainAspectRatio: true,
		                    plugins: {
		                        legend: { labels: { color: "#333333" } }
		                    }
		                }
		            });
		        });
		    })();
		    </script>

[skillwrapper type="skt_polygraph"]

[skill percent="51" title="WordPress" polygraph_background="#6adcfa"]

[skill percent="70" title="JavaScript" polygraph_background="#fa6e6e"]

[skill percent="40" title="PHP" polygraph_background="#336699"]

[/skillwrapper]