JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<div style="background: white;">
<canvas id="radar" height="300"></canvas>
</div>
JavaScript
var data = {
labels: ["Eating", "Drinking", "Sleeping"],
datasets: [
{
backgroundColor: "rgba(199,159,196,0.2)",
borderWidth: 2,
borderColor: "rgba(199,159,196,1)",
pointBorderColor: "rgba(199,159,196,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(199,159,196,1)",
pointHoverBorderColor: "rgba(199,159,196,1)",
pointHoverBorderWidth: 2,
data: [5, 9, 6]
}
]
};
var ctx = $("#radar");
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
responsive: true,
legend: {
display: false
},
tooltips: {
mode: 'single',
backgroundColor: '#fff',
bodyColor: '#888',
titleColor: '#888'
},
animation: {
duration: 1500,
easing: 'easeInOutQuart'
},
scale: {
ticks: {
beginAtZero: true,
display: false
},
beforeFit: function (scale) {
if (scale.chart.config.data.labels.length === 3) {
var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
scale.height *= (2 / 1.5)
scale.height -= pointLabelFontSize;
}
},
afterFit: function (scale) {
if (scale.chart.config.data.labels.length === 3) {
var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
scale.height += pointLabelFontSize;
scale.height /= (2 / 1.5);
}
},
},
maintainAspectRatio: false,
elements: {
line: {
tension: 0,
}
}
}
});