I have a line chart but I have no idea why a bunch of x,y corods are appearing on the line itself. Below is the code I believe needs to be modified:
datalabels: {
display: true,
clamp: true,
overlap: false,
font: { family: 'Plus Jakarta Sans', size: 10.5, weight: 500 },
padding: 2,
color: tickColor,
labels: {
title: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
display: (context) => {
const total = getStackedTotal(context);
if (typeof total === 'undefined' || total.total === 0) return false;
else return true;
},
anchor: 'end',
align: 'end',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
formatter: (value, context) => {
const total = getStackedTotal(context);
if (typeof total === 'undefined' || total.total === 0) return '';
return formatter({
format: context.dataset.format,
value: total.total,
decimalPlaces: context.dataset.decimalPlaces,
multiplier: context.dataset.multiplier,
minimumDecimalPlaces: 0,
displayZero: context.dataset.displayZero
});
}
},
value: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
anchor: (context) => {
try {
if (context.dataset.isStacked) return 'center';
const isBar = context.dataset.isBar;
if (isBar) {
const dataPoint = context.dataset.data[context.dataIndex] as { x: string; y: number };
if (dataPoint?.y >= 0) return 'end';
else return 'start';
} else {
return 'end';
}
} catch (e) {
return 'end';
}
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
align: (context) => {
try {
if (context.dataset.isStacked) return 'center';
const isBar = context.dataset.isBar;
if (isBar) {
const dataPoint = context.dataset.data[context.dataIndex];
if (dataPoint?.y >= 0) return 'end';
else return 'start';
} else {
return 'end';
}
} catch (e) {
return 'end';
}
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
formatter: (value, context) => {
if (typeof value?.y !== 'number') return '';
return formatter({
format: context.dataset.format,
value: value?.y,
decimalPlaces: context.dataset.decimalPlaces,
multiplier: context.dataset.multiplier,
minimumDecimalPlaces: 0,
displayZero: context.dataset.displayZero
});
}
}
}
}
I should mention
//setting this to true or false doesn't seem to do anything
datalabels: {
display: true,
// But if I modify the display within the labels to false the labels appear and if it's set to true the labels disappear.
labels: {
display: (context) => {
But how do I modify it such that I can reduce the number of labels that are currently appearing on the line?