Chartjs datalabels is not showing the labels on the bar chart

Question

I have a vertical bar chart built via chartjs. I'm using the datalabels plugin, I expect the data to be plotted on each bar but it's not visible

const data = [
    {
        "date": "2023-02-23",
        "subscribers": 1208123
    },
    {
        "date": "2023-02-22",
        "subscribers": 1045338
    },
    {
        "date": "2023-02-21",
        "subscribers": 1043130
    },
    {
        "date": "2023-02-20",
        "subscribers": 1248035
    },
    {
        "date": "2023-02-19",
        "subscribers": 1243734
    },
    {
        "date": "2023-02-18",
        "subscribers": 1240317
    },
    {
        "date": "2023-02-17",
        "subscribers": 1033439
    },
    {
        "date": "2023-02-16",
        "subscribers": 974864
    }
];
  const chart_label = "Number of subscribers";

 const chart_canvas = document
      .getElementById("number_of_messages_delivered")
      .getContext("2d");
    Chart.defaults.set("plugins.datalabels", {
      color: "#FE777B",
    });
    push_messages_chart = new Chart(chart_canvas, {
      type: "bar",
      options: {
        animation: true,
        plugins: {
          // Change options for ALL labels of THIS CHART
          datalabels: {
            color: "#FFCE56",
            display: true, // Set to true to display the labels
          },
        },
      },
      data: {
        labels: data.map((row) => row.date),
        datasets: [
          {
            label: chart_label,
            data: data.map((row) => row.subscribers),
          },
        ],
      },
    });

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>

I tried different iterations since last week, but nothing worked. This is just a random sample of what I've tried

@0stone0 I'm using datalabels plugin in order to draw the number on the bar itself, the plugin isn't working, the number isn't visible on the bar unless you hover. But the hovering behavior isn't related to the plugin, it's a built in functionality. I want to draw the number of subscriber on the bar, so you can see the number without hovering — Lynob, Feb 23 '23 at 15:03

0stone0 · Accepted Answer · 2023-02-23T15:16:19.293

You forgot to initialize the plugin!

Add this:

Chart.register(ChartDataLabels);

Some additional info / improvements

The color of the datalabels should be inside the labels.value object. I've moved that so the lables are the correct color (#FFCE56)
The color on the dataset should be backgroundColor, changed that as well
I've implemented a formatter on the label with the use of this question on how to apply thousand-seperators, just to make it more readable (again).
```
formatter: n => numberWithCommas(n),
```

Updated Snippet

const data = [{"date": "2023-02-23", "subscribers": 1208123 }, {"date": "2023-02-22", "subscribers": 1045338 }, {"date": "2023-02-21", "subscribers": 1043130 }, {"date": "2023-02-20", "subscribers": 1248035 }, {"date": "2023-02-19", "subscribers": 1243734 }, {"date": "2023-02-18", "subscribers": 1240317 }, {"date": "2023-02-17", "subscribers": 1033439 }, {"date": "2023-02-16", "subscribers": 974864 } ]; 
const chart_label = "Number of subscribers";
  
Chart.register(ChartDataLabels); // Enable plugin

const chart_canvas = document
      .getElementById("number_of_messages_delivered")
      .getContext("2d");

push_messages_chart = new Chart(chart_canvas, {
    type: "bar",
    options: {
        animation: true,
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                formatter: n => numberWithCommas(n),
                display: true, // Set to true to display the labels
                labels: {
                    value: {
                        color: "#FFCE56"
                    }
                } 
            }
        },
    },
    data: {
        labels: data.map((row) => row.date),
        datasets: [
            {
                label: chart_label,
                data: data.map((row) => row.subscribers),
                backgroundColor: "#FE777B",
            },
        ],
    },
});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>

Thank you, will accept your answer in 4 minutes, I just thought that this initializes the plugin `Chart.defaults.set("plugins.datalabels", {` — Lynob, Feb 23 '23 at 15:08

Chartjs datalabels is not showing the labels on the bar chart

1 Answers1

Updated Snippet