"datalabels" property applied to all "datasets"

Question

I've been working on the front end bit recently on one of the projects at work and I got a bit of a problem. We're displaying a graph on the website, which shows some realtime data pulled from the database.

This is the code that has been written to create the graph:

const weeklyBarData = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
      label: 'Pens Assembled',
      backgroundColor: 'rgba(200,10,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Disassembled',
      backgroundColor: 'rgba(10,200,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Claimed',
      backgroundColor: 'rgba(10,10,200,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
  ],
};

As you can see in the code there, I had to copy the code related to "datalabels" three times, and I want to avoid that. I've read in the Chart.js documentation that you can apply "datalabels" to each dataset, whole chart or globally, and I believe in our situation applying this to a chart would be the best solution. I tried to add "datalabel" code behind the array, but still within datasets and it didn't work. I also tried to redesign the weeklyBarData, but I had some errors that wouldn't even load a website correctly, I tried to do something like this:

const weeklyData = {
  labels: [],

  datasets: {
    data: [
      {
        // logic goes here
      },
      {
        // logic goes here
      },
      {
        // logic goes here
      }
    ],
    datalabels: {
        // logic goes here
    }
  }
};

I run out of ideas and I can't find any solution online, hence me question: Is there any way for me to either redesign the weeklyBarData code or apply the datalabel property to the whole chart using te current code?

(We use React for our front end).

Secodnly, using the code provided above I am able to create this graph:

As you can see, I get that weird little thing in the top-left corner. I zoomed at it and it seems like some string with "%". Also, it disappears when I remove all datalabel code. Any thoughts on what that could be and how to get rid of that?

Answer 1

to apply the labels to the entire chart,
add datalabels to the plugins option...

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: weeklyBarData,
  options: {
    plugins: {
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    }
  }
});

see following working snippet...

$(document).ready(function() {
  var totalPensDaily = [100, 100, 100, 100, 100];

  const weeklyBarData = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'Pens Assembled',
        backgroundColor: 'rgba(200,10,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Disassembled',
        backgroundColor: 'rgba(10,200,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Claimed',
        backgroundColor: 'rgba(10,10,200,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
    ],
  };

  var ctx = document.getElementById("data");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: weeklyBarData,
    options: {
      plugins: {
        datalabels:{
          align: 'end',
          anchor: 'end',
          formatter: function(value, context){
            let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
            percent = Math.round(percent);
            percent = (percent !== 0) ? percent.toString() + '%' : "";
            return percent;
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="data"></canvas>

note: I don't see any weird little thing in the top-left corner here...