Tooltip to display a respective background color specifically for the application, while still...

this.options.plugins = {
tooltip: {
callbacks: {
// Suppress the default title (duration) rendering
title: () => {
return "";
},
// Suppress individual label rendering
label: () => {
return "";
},
// Combine everything in the afterBody
afterBody: (context: any) => {
console.log("context", context);
const apps = context
.map((item) => item.dataset.label)
.join(", ");
const duration = context[0].label;
const vulns = context[0].raw;
return [
`application: ${apps}`,
`vulnerabilities: ${vulns}`,
`Duration: ${duration}`,
];
},
},
},
};


I want the chart tooltip to display the application, vulnerabilities, and duration. However, for the application name in the tooltip, I would like it to have a background color.

current behaviour for only applications:

Expected behaviour for only applications i want like below colors for:

Continue reading...