# Datalabels using Chart.js plugin

**URL:** <https://community.weweb.io/t/datalabels-using-chart-js-plugin/7849>\
**Category:** How do I?\
**Created:** [March 29, 2024, 4:26pm UTC](https://community.weweb.io/t/datalabels-using-chart-js-plugin/7849 "2024-03-29T16:26:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![edgar](https://avatars.discourse-cdn.com/v4/letter/e/b487fb/32.png) [@edgar](https://community.weweb.io/u/edgar)\
**Post date:** [March 29, 2024, 4:26pm UTC](https://community.weweb.io/t/datalabels-using-chart-js-plugin/7849/1 "2024-03-29T16:26:16Z")

</div>

Hi, all.

**Problem**  
I’m trying to get datalabels to display on my scatter plot chart. At a minimum, I need the tooltip to display the title of each data point which is different from each point even though they are part of the same dataset. I also attempted to use chatjs-plugin-datalabels using the NPM plugin, but the functionality isn’t working for me.

Any help is appreciated. Thank you.

**Scatter Plot Setup**  
Datasets binding:

```auto
return [
  {
    label: 'None',
    data: collections[
       "d296c7c4-4ba9-4107-ab1d-4f522470790c"
    ]?.["data"].map((row) => ({
      x: row.Effort,
      y: row.Value,
      context: row.Item,
    })),
    backgroundColor: 'green',
    pointRadius: 10,
    hoverRadius: 20,
    datalabels: {
          display: true,
          color: 'black',
          font: {
            weight: 'bold'
          },
          formatter: (value, context) => {
            return context.chart.data.datasets[context.datasetIndex].label;
          }
        }
  },
  {
    label: 'scatter',
    data: collections[
    "d296c7c4-4ba9-4107-ab1d-4f522470790c"
    ]?.["data"].map((row) => ({
      x: row.Effort,
      y: row.Value,
      title: row.Item,
    })),
    backgroundColor: 'blue',
    pointRadius: 10,
    hoverRadius: 20,
  },
];

```

Options binding:

```auto
return {
    plugins: {
        legend: {
            display: true,
        },
        tooltip: {
        enabled: true,
        },
        datalabels: {
          display: true,
          color: 'black', // Customize label color
          font: {
            weight: 'bold'
          },
          formatter: (value, context) => {
            return context.chart.data.datasets[context.datasetIndex].label;
          }
        },
    },
    layout: {
      padding: {
        top: 60,
        bottom: 60,
        left: 60,
        right: 60,
      }
    },
    clip: false,
    scales: {
      x: {
        type: 'linear',
        position: 'center',
        min: 1,
        max: 10,
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: "Effort",
          align: 'start',
          font: {
            size: 20,
          },
        },
      },
      y: {
        type: 'linear',
        position: 'center',
        min: 1,
        max: 10,
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: "Value",
          align: 'end',
          font: {
            size: 20,
          },
        },
      },
    }
} 

```

**Screenshots**

 ![Screenshot 2024-03-29 at 9.20.08 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2ec77ca74f0ca6f98207ca949226c5d8940c9b5e.png)  
 ![Screenshot 2024-03-29 at 9.22.04 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/261ec4bffe4c2fcb3024ab7327c1f6b198f9e4a6.png)

**Articles that I’ve read**

> [@How can i use dataLabels (not axis labels or tick labels) with the ChartJS plugin?](https://community.weweb.io/t/how-can-i-use-datalabels-not-axis-labels-or-tick-labels-with-the-chartjs-plugin/2427/10):
>
> Hello. Is there any update on the topic? I am also searching to do the same thing, but I have found no answer…

> [@How to use plugins that require registration (ChartJs)](https://community.weweb.io/t/how-to-use-plugins-that-require-registration-chartjs/4539/5):
>
> I’ll take a look, thank you for your help!

> [@Extending chartjs with plugins](https://community.weweb.io/t/extending-chartjs-with-plugins/7617/2):
>
> Hi @raydeck wave It’s not possible right now. We have it on the roadmap but not prioritized yet so no ETA. I’ve just updated our internal ticket so the product team is aware of your request.

---

<div class="post-metadata">

**Author:** ![BenoitG](https://avatars.discourse-cdn.com/v4/letter/b/3da27b/32.png) [@BenoitG](https://community.weweb.io/u/BenoitG)\
**Post date:** [October 1, 2024, 12:58pm UTC](https://community.weweb.io/t/datalabels-using-chart-js-plugin/7849/2 "2024-10-01T12:58:33Z")

</div>

Up 🙂