Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Assign customized colours for chart bars based on columns data

Answered
Dama Ankaiah asked on December 1, 2020

Hi Team,
 
We need to assign the customized colours for chart bars based on column data. I found URL 
(https://www.flexmonster.com/doc/customizing-pivot-charts/) and tried to implement in angular 8 but I could not succeed . Please find the screen shot for more info(based on criticality [normal, near normal etc]need to assign the customized colour).
If it is possible ,could you please help us with an example in angular.
 
Thanks,
Ankaiah 

Attachments:
ScreenShot.png

6 answers

Public
Vera Didenko Flexmonster December 2, 2020

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

Public
Dama Ankaiah December 2, 2020

Hi Vera,
Thank you very much for quick response!!!.

Your solution is worked and customized colours are able to apply to chart bars based on column data.

But report grouping icons(+,-) and its child elements are still filling with different colour even chart bars are updated with customized colour. I have attached the screen shot for more information.

if it is possible, could you please help us on this by updating your Angular project.
 
Thanks,
Ankaiah
 
 
 

Attachments:
ScreenShot.png

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster December 3, 2020

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

Public
Dama Ankaiah December 4, 2020

Hi lllia,

We are able to set customized colour for top level icons. Thanks for helping on this.

Can we do the  sub-level icon colours match the shaded sub-level colours in the chart?

I tried to find any sample on this but I could not find. If it is possible please help us on this.
 
Please find the attached screenshot for more information.
 
Thanks,
Ankaiah

Attachments:
ScreenShot.png

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster December 8, 2020

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

Public
Dama Ankaiah December 9, 2020

Hi Illia,
It is worked for me. Thanks for your help!!!
Regards,
Ankaiah

Please login or Register to Submit Answer