JSFiddle - React, Tailwind, and code Playground

by javaparknet

HTML

<script src="http://www.chartjs.org/docs/Chart.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>

JavaScript

//Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.

var data = {
	labels : ["Performance", "Validation", "Mobile", "Security"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
            data : [59,90,81, 80]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			pointColor : "rgba(151,187,205,1)",
			pointStrokeColor : "#fff",
            data : [59,90,81, 90]
		}
	]
};

var options = {
    scaleShowLabels :false,
    scaleFontSize : 8
};
new Chart(ctx).Radar(data,options);