I want to be able to have different colour x-Axis labels (tickLabels?) based on the value of the Lable — EXPIRED would be Red, “> 40 Days” would be Green, etc
Used the following javascript
function(options) {
console.log(options); // Log the entire options object to the console for inspection
var colorMapping = {
'EXPIRED': '#FF0000', // red
'<10 Days': '#00FF00', // green
'<50 Days': '#0000FF', // blue
'N/A': '#FFFF00' // yellow
};
// Check if xaxis.categories is defined
if (options.xaxis && options.xaxis.categories) {
var labelColors = options.xaxis.categories.map(function(category) {
return colorMapping[category] || '#000000'; // default black if not mapped
});
// Ensure xaxis.labels is defined before modifying it
if (!options.xaxis.labels) {
options.xaxis.labels = {};
}
// Update tick labels with the corresponding colors
options.xaxis.labels.style = Object.assign(options.xaxis.labels.style || {}, {
colors: labelColors
});
// Optionally adjust tick labels if that property is more appropriate
options.xaxis.tickPlacement = 'on';
options.xaxis.labels = {
style: {
colors: labelColors
}
};
}
return options;
}
New contributor
Amin Adatia is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.