JSFiddle - React, Tailwind, and code Playground

by olgamarishem

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.2/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.1" defer></script>
<div class="chart-container" style="position: relative; height:auto; width:100%">
    <canvas id="pie_chart_1" width="350" height="250"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("pie_chart_1").getContext("2d");
        var pie_chart_1 = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: [
                           51,20, 13, 11, 3, 2,
                        ],
                        backgroundColor: [
                            'rgba(122, 189, 148, 0.85)',
                            'rgba(255, 225, 159, 0.85)',
                            'rgba(255, 196, 167, 0.85)',
                            'rgba(134, 139, 134, 0.85)',
                            'rgba(255, 160, 0, 0.85)',
                            'rgba(215, 213, 161,0.85)'
                        ],
                        label: 'Dataset 1'
                    }],
                    labels: [
                       'Naturgy', 'Endesa','Iberdrola','EDP',  'Otros', 'Repsol (Viesgo)'  

                    ]
                },
                options: {
                    circumference: 2 * Math.PI,
                    rotation: -0.5 * Math.PI,
                    title: {
                        display: true,
                        text: 'Distribución del número de clientes de gas por comercializadora (2019)',
                        fontSize: 16,
                        fontFamily: '"Work Sans",sans-serif',
                        fontColor: '#212529',
                        padding: 25
                    },
                    responsive: true,
                    legend: {
                        display: true,
                       ...