asked on December 28, 2023
Good morning Maksym!
How are you doing ?
We are having issues with Flexmonster's chart color change functionality.
Changing the selected colors only occurs when we change the card information type from table to graphics.
If Flexmonster loads the information in graphic form, the previously selected color will not be displayed.
We created an example file in Angular, but I am unable to include it in this ticket, perhaps due to its size (50mb).
⋅ December 28, 2023
Hello Rafael,
Thank you for reaching out to us.
The example would greatly help us to reproduce the described issue. Please remove the node_modules folder (if present) and attach the project to the answer. Alternatively, please upload the files to Google Drive and send us the link. Providing an example would be greatly helpful to us.
Looking forward to hearing from you.
Kind regards,
Nadia
⋅ December 28, 2023
Hello Nadia.
Follow the link to download the example:
https://drive.google.com/file/d/1arclmXQITq3jpQH-VSxqNG33NZT5sGOp/view
⋅ December 28, 2023
The example will be in pivot-table-demo.component.ts
⋅ December 29, 2023
Hello Rafael,
Thank you for the example.
Kindly note that the recommended way is to set the colors for chart elements in the customizeChartElementFunction.
We have also noticed that the chartType property is missing in flexmonster.d.ts. Our team will add this property with ETA Jan 9th. We will notify you about the release. As a temporary workaround, you can use // @ts-ignore.
For example:
customizeChartElementFunction = (element: Element,data: Flexmonster.ChartData | Flexmonster.ChartLegendItemData): void => {
const color = "#fcba03"; //Placeholder color (yellow)
// @ts-ignore
if (data.chartType == "pie") {
const itemPath = element.querySelector("path");
if (itemPath) {
itemPath.style.fill = color;
}
// @ts-ignore
} else if (data.chartType == "line" || data.chartType == "scatter") {
(element as SVGElement).style.stroke = color;
} else {
(element as SVGElement).style.fill = color;
}
};
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ January 4, 2024
Hello Nadia.
Happy New Year and thanks for the explanations.
The proposed solution didn't work for us, what would be ideal is for the customizeChartElement input to return an array with all the columns instead of returning them one by one, would it be possible?
Today we have some customers who refuse to use personalized graphics due to the lack of color selection and we are implementing it in our tool. This improvement would be of great value.
Kind regards,
Rafael Ramires
⋅ January 5, 2024
Hello Rafael,
Happy New Year! Thank you for the response.
Currently, the customizeChartElement API call cannot return an array of all elements. However, our team checked your project, and we recommend the following solution:
You can remove the flexmonster.refresh(); line from the ready() handler function in the pivot-table-demo.component.ts file:
ready(flexmonster: Pivot) {
flexmonster.setReport({
dataSource: {
type: 'json',
filename: 'https://cdn.flexmonster.com/data/retail-data.json'
},
options: {
viewType: 'charts'
}
})
flexmonster.refresh(); // remove this line
}
This way, the yellow color will be set on the first loading of the page.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ January 10, 2024
Hello Nadia.
We managed to solve the problem by removing refresh(), thank you very much.
Another question that arose from our developers, is it possible for the reportchange event to be triggered again, after I select the pie chart option for a piece of data that is already in a pie chart?
If I have a chart selected and click on the same type of chart, the reportchange event will be fired again.