JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chartjs-plugin-annotation.min.js" defer></script>
<script src="https://static.greenpeace.es/contaminacion-covid/datos/data.js" defer></script>

<div class="chart-container" lang="{{ site.data[page.lang_file].language }}" style="position: relative; height:auto; width:100%">
  <canvas id="covid_chart_2" width="350" height="300"></canvas>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {

        var ctx = document.getElementById('covid_chart_2').getContext('2d');
        var myMixedChart = new Chart(ctx, {
            type: 'bar',
            data: chartData_BARCELONA,
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Media semanal de NO2 en Barcelona',
                    fontSize: 16,
                    fontFamily: '"Work Sans",sans-serif',
                    fontColor: '#212529'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                          // beginAtZero: true,
                          fontFamily: '"Work Sans",sans-serif',
                          fontColor: '#212529'
                        },
                        scaleLabel: {
                          display: true,
                          labelString: 'mcg/m3',
                          fontFamily: '"Work Sans",sans-serif',
                          fontColor: '#212529'
                        }
                      }],
                    xAxes: [{
                        ticks: {
                            fontFamily:...