JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="canvas-container">
<canvas id="canvas"></canvas>
</div>
CSS
#canvas-container {
width: 100%;
text-align: center;
}
canvas {
display: inline;
}
JavaScript
var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2,2,2,2]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [4,4,4,4]
}
]
};
window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
responsive: true
});