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>
<div class="chart-container" style="position: relative; height:auto; width:100%">
<p>
Ránking mundial del aumento de consumo de carbón
</p>
<p>
<small>Variación en % 2017/16</small>
</p>
  <canvas id="bar_chart_4" width="350" height="250"></canvas>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  var ctx = document.getElementById("bar_chart_4");
  var bar_chart_4 = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
      labels: ["España", "Pakistán", "Uzbekistán", "Turquía", "Bielorrusia", "Filipinas", "Grecia", "Francia", "Portugal", "Indonesia", "Total Mundo"],
      datasets: [{
        label: '',
        data: [28.50, 26.20, 20.80, 16.30, 16.20, 12.00, 11.70, 11.40, 10.60, 7.40, 1.00],
        backgroundColor: [
          'rgba(134, 139, 134, 0.85)',
          'rgba(91, 74, 89, 0.85)',
          '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)'
          
        ]
      }]
    },
    options: {
      title: {
        display: false,
        text: 'Ránking mundial del aumento de consumo de carbón 2017/2016',
        fontSize: 16,
        fontFamily: '"Work Sans",sans-serif',
        fontColor: '#212529'
      },
      legend: {
        display: false,
        labels: {
          fontName: '"Work Sans",sans-serif',
          fontColor: '#212529',
          fontSize: 13
        }
      },
      layout: {
        padding: {
          bottom: 20
        }
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var value = tooltipItem.xLabel;
            return " " +...

CSS

.chart-container p {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  text-align:center;
  margin: 0;
}
.chart-container small {
  font-weight: 400;
}