Line Graph

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

<?php
echo 'Hello, world!';

<canvas class="linegraphskill" id="toolTip1" aria-label="chart" height="350" width="580" style="margin:0 auto;"></canvas><script>
					document.addEventListener("DOMContentLoaded", function() {
						var xValues_1 = ["WordPress","JavaScript","PHP"];
						var yValues_1 = ["51","70","40"];
						var barColors_1 = ["#6adcfa","#fa6e6e","#336699"];
						var chartTooltip_1 = document.getElementById("toolTip1").getContext("2d");
						new Chart(chartTooltip_1, {
							type: "line",
							data: {
								labels: xValues_1,
								datasets: [{
									label: "",
									data: yValues_1,
									backgroundColor: barColors_1,
									borderColor: ["black"],
									borderWidth: 1,
									pointRadius: 5,
								}],
							},
							options: {
								responsive: false,
								plugins: {
									legend: {
										display: false,
										position: "bottom",
										align: "center",
										labels: {
											color: "darkred",
											font: { weight: "bold" }
										}
									}
								}
							}
						});
					});
				</script>

[skillwrapper type="skt_linegraph"]

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

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

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

[/skillwrapper]