Im having a problem to set an alternative color for a label on a series column template using the propertyField.
For example. I use this:
let columnTemplate = series.columns.template;
columnTemplate.propertyFields.fill = 'color';
Where 'color' is comming from DataItem, as a data from backend system.
And later on I want to add a label on the column. And I want a contrast so I want to use the alternative color: https://www.amcharts.com/docs/v4/concepts/colors/#Getting_contrasting_color
I make up my label as:
let label = columnTemplate.createChild(am4core.Label);
Then I will set the alternative color from the series.columns.template. But I dont get it work. I tried for example:
label.fill = series.columns.template.fill.alternative;
Dosent work.
This:
label.fill = am4core.color(series.columns.template.propertyFields.fill).alternative;
Dont work.
This:
label.adapter.add('fill', (value, target, key) => {
const dataContext: { [key: string]: string } | undefined = target.dataItem?.dataContext as {
[key: string]: string;
};
return am4core.color(dataContext?.color).alternative;
});
Throws an error...
Is there anyone who know a solution for this? Please help.
I,m not sure this is a good solution but it works:
export function setContrastColor(value: any, target: any) {
const dataContext = (target.dataItem?.dataContext ?? {}) as Record<string, string | undefined>;
if (dataContext.color) {
return am4core.color(`${dataContext?.color}`).alternative;
} else {
return am4core.color('#FFF');
}
}
And calling it:
label.adapter.add('fill', setContrastColor);