JSFiddle - React, Tailwind, and code Playground
by Osvaldo
HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
<canvas id="pie_chart_3" width="350" height="250"></canvas>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var ctx = document.getElementById("pie_chart_3").getContext("2d");
var pie_chart_3 = new Chart(ctx, {
type: 'polarArea',
data: {
datasets: [{
data: [
20,
50,
30
],
backgroundColor: [
'rgba(122, 189, 148, 0.75)',
'rgba(255, 225, 159, 0.75)',
'rgba(255, 196, 167, 0.75)'
],
label: 'Dataset 1'
}],
labels: [
'Alpha',
'Beta',
'Delta'
]
},
options: {
title: {
display: true,
text: 'Comparación entre valores',
fontSize: 16,
fontFamily: '"Work Sans",sans-serif',
fontColor: '#212529',
padding: 25
},
responsive: true,
scale: {
ticks: {
fontFamily: '"Work Sans",sans-serif',
fontColor: '#212529'
}
},
legend: {
display: true,
fullWidth: false,
...