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:
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:
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
Articles that I’ve read
