amchartsamcharts4

Set alternative colors when using the propertyFields on series.columns.template


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.


Solution

  • 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);