JSFiddle - React, Tailwind, and code Playground

by Shashi Kumar Nagulakonda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>

JavaScript

// Bar chart

var valuedata = [2478, 5267, 734, 784, 433];
var valuelabel = ["Africa", "Asia", "Europe", "Latin America", "North America"];


var myBarChart = new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: valuelabel,
    datasets: [{
      label: "Population (millions)",
      backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
      data: valuedata,

    }]
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'Predicted world population (millions) in 2050'
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          display: false
        }
      }]
    },
    plugins: {
      datalabels: {
        color: 'white',
        display: function(context) {
          console.log("Algo: " + context);
          return context.dataset.data[context.dataIndex] > 15;
        },
        font: {
          weight: 'bold'
        },
        formatter: function(value, context) {
          return context.dataIndex + ': ' + Math.round(value * 100) + '%';
        }
      }
    }
  }
});

myBarChart.update();