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="line_1_chart" width="350" height="250"></canvas>
</div>
<div class="fuente">
    <p>
    Fuente: Sistema Integral de Trazabilidad Animal (SITRAN). Elaboración propia.
</p>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ctx = document.getElementById("line_1_chart");
        var line_1_chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["2016","2017","2018","2019","2020","2021"],
                datasets: [{
                    label: 'Nº de gallinas',
                    data: [415.61,406.21,456.14,474.12,502.98,493.68],
                    borderColor: 'rgba(122, 189, 148, 1)',
                    backgroundColor: 'rgba(0,0,0,0)'
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Evolución del censo de gallinas (para huevos y carne) en España',
                    fontSize: 16,
                    fontFamily: '"Work Sans",sans-serif',
                    fontColor: '#212529'
                },
                legend: {
                    display: true,
                    labels: {
                        fontName: '"Work Sans",sans-serif',
                        fontColor: '#212529',
                        fontSize: 13
                    }
                },
                elements: {
                    line: {
                        tension: 0, // disables bezier curves
                    }
                },
             ...