JSFiddle - React, Tailwind, and code Playground

by greenpeace

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>
<style>
  .fuente {
     font-family: "Work Sans", sans-serif;
    font-weight:400;
    font-size:14px;
    color:gray;
    text-align: left;
    margin: 0; 
  }
</style>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <canvas id="pie_7_chart" width="350" height="250"></canvas>
</div>
<div class="fuente">
    <p>
    Fuente: Gobierno de Extremadura. Elaboración propia.
</p>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("pie_7_chart").getContext("2d");
        var pie_7_chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: [
                           48.6, 51.4
                        ],
                        backgroundColor: [
            
            'rgba(122, 189, 148, 0.85)',
            'rgba(195, 224, 166, 0.85)',
            'rgba(215, 213, 161, 0.85)',
            'rgba(218,241,250, 0.85)',
            'rgba(255, 225, 159, 0.85)',
            'rgba(253, 246, 178, 0.85)',
            'rgba(255, 160, 0, 0.85)',
            'rgba(255, 196, 167, 0.85)',
            'rgba(255, 121, 84, 1)',
            'rgba(72, 185, 229, 0.65)',
            'rgba(255, 195, 49, 0.65)',
            'rgba(142, 229, 187, 0.65)',
            'rgba(195, 224, 166, 0.85)',
            'rgba(122, 189, 148, 0.85)',
         
                        ],
                        label: 'Dataset 1'
                    }],
                    labels: [
                       'Extensivo',
                        'Intensivo',

                    ]
                },
                options: {
                    circumference: 2 * Math.PI,
                    rotation: -0.5 * Math.PI,
                   ...