Assign customized colours for chart bars based on columns data

Hello, Ankaiah,
 
Thank you for reaching out to us. 
 
We have prepared a sample Angular project for reference (please see "flexmonster-angular-project.zip" in the attachments). 
In the example, the chart colors for "Patient Status" are customized based on the value: green for "Outpatient" and red for "Inpatient".
 
After unpacking the project, please run the following commands to start the application: 

npm i

npm start

The project will be available at http://localhost:4200/
 
Please let us know if this helps.
 
Kind regards,
Vera

Hello, Ankaiah,
 
Thank you for your feedback.
 
Please use an additional condition to apply customization on legends:

customizeChartElementFunction = (element, data) => {
  if (this.contains(data, "patient status.[inpatient]")) {
    let newColor = new TinyColor("#120000");
      if (data.type == "series") {
        this.customizeChartElement(data, element, newColor);
      } else if (data.type == "legend") {
        element.querySelector(".fm-icon-display").style.backgroundColor = "rgb(255, 18, 18)";
      }
  }
  else if (this.contains(data, "patient status.[outpatient]")) {
    let newColor = new TinyColor("#002100");
      if (data.type == "series") {
        this.customizeChartElement(data, element, newColor);
      } else if (data.type == "legend") {
        element.querySelector(".fm-icon-display").style.backgroundColor = "rgb(16, 255, 16)";
      }
  }
}

 
The contains function of the example needs to be complemented as well:

contains(data, memberName) {
  ...
  if (data && data.member && data.member.uniqueName == memberName) {
    return true;
  }
  return false;
}

 
You are welcome to see our documentation to learn more about customizeChartElement API call.
 
Also, we have complemented the sample project to demonstrate this approach. It can be found in attachments.
 
Please let us know if it works for you.
Feel free to contact us in case further questions arise.
 
Kind regards,
Illia

Hello,
 
Thank you for your feedback.
 
We have improved our sample so that the new color is applied to the expanded nodes.
 
The following functions from the example were complemented to achieve this functionality:

customizeChartElementFunction = (element, data) => {
  if (this.contains(data, "patient status.[inpatient]", data.level)) {
    let newColor = new TinyColor("#120000");
    this.customizeChartElement(data, element, newColor);
  } else if (this.contains(data, "patient status.[outpatient]", data.level)) {
    let newColor = new TinyColor("#002100");
    this.customizeChartElement(data, element, newColor);
  }
}

customizeChartElement(data, element, newColor) {
  if (data.type == "series") {
    if (data.chartType == "pie") {
      if (element.querySelector('path')) {
        element.querySelector('path').style.fill = this.applyShade(newColor, element.querySelector('path').style.fill).toRgbString();
      }
    } else if (data.chartType == "line" || data.chartType == "scatter") {
      element.style.stroke = this.applyShade(newColor, element.style.stroke).toRgbString();
    } else {
      element.style.fill = this.applyShade(newColor, element.style.fill).toRgbString();
    }
  }
  else if (data.type == "legend" && !data.isExpanded) {
    element.querySelector(".fm-icon-display").style.backgroundColor = this.applyShade(newColor, data.color).toRgbString();
  }
}

contains(data, memberName, level) {
  ...
  if (level > 0 && data.tuple) {
    for (let i = 0; i < data.tuple.length; i++) {
      if (data.tuple[i].uniqueName == memberName) {
        return true;
      }
    }
  }
  return false;
}

 
Please let us know if it works for your case.
We are looking forward to hearing from you.
 
Regards,
Illia