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
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
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
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
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
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
Hi Illia,
It is worked for me. Thanks for your help!!!
Regards,
Ankaiah