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>
<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: [
                       3.33,
                       7.23,
                       10.65,
                       12.32,
                       16.13,
                       50.32
                    ],
                    backgroundColor: [
                        'rgba(122, 189, 148, 1)',
                        'rgba(255, 196, 167, 1)',
                        'rgba(218,241,250, 0.85)',
                        'rgba(91, 74, 89, 0.85)',
                        'rgba(253, 246, 178, 0.85)',
                        'rgba(215, 213, 161, 0.85)'
                    ],
                    label: 'Dataset 1'
                }],
                labels: [
                    'Carbón',
                    'Renovables no eléctricas',
										'Electricidad renovable',
                    'Electricidad no renovable',
                    'Gas fósil',
                    'Productos petrolíferos'
                ]
            },
            options: {
                circumference: 2 * Math.PI,
                rotation: -0.5 * Math.PI,
                title: {
                    display: true,
                    text: 'Consumo de energía final por fuentes en España (2019)',
                    fontSize: 16,
                    fontFamily: '"Work Sans",sans-serif',
                    fontColor: '#212529',
                    padding: 25
             ...