Problems with changing colors

Hello, Rafael!
 
Thank you for reaching out to us.
 
As an entry point, could you please provide us with more details about the logic of changing the colors of Flexmonster Pivot Charts? Our team would greatly appreciate the code snippet with a color-changing approach or the JSFiddle sample.
With this information, we'll be able to suggest you more case-specific solution.
 
Looking forward to hearing from you.
 
Kind regards,
Solomiia

Hello, Rafael!
 
Thank you for providing the sample project.
 
Our team has looked through the provided sample. Kindly note that the active grid or chart is re-rendered after each change of the pivot state, e.g., changing the slice or setting new number formatting.
 
If chart colors are set only on the first reportcomplete call, when a user makes a change in the pivot table, the colors are overwritten by the default ones.
Therefore, we recommend handling chart colors in the reportchange/reportcomplete event handlers.
 
We also want to mention two approaches from our docs to change chart colors:
1. Overwrite our CSS styles:

.fm-charts-color-1 {
  fill: rgb(0, 164, 90) !important;
}

.fm-charts-color-7 {
  fill: rgb(223, 56, 0) !important;
}

Here is the JSFIddle example for reference: https://jsfiddle.net/flexmonster/wLqupkc5/.
 
2. Use customizeChartElement() function
The step-to-step tutorial is described in our docs: https://www.flexmonster.com/doc/customizing-pivot-charts/#using-customizeChartElement.
Here is also JSFiddle to illustrate the approach: https://jsfiddle.net/flexmonster/0t8gv2cp/.
 
Hope you will find our answer helpful.
 
Kind regards,
Solomiia

Hello, Rafael!

Thank you for your swift response.

Kindly note that our most recommended approach is the native approach of customizing charts using customizeChartElement() function.

If we understand the requirements correctly, the users should enter the chart colors from the UI, and then the colors should be changed on Flexmonster Pivot Charts. The idea is to call the customizeChartElement() API call each time the user applies new colors.

Here is the JSFiddle to illustrate the idea: https://jsfiddle.net/flexmonster/uo42bgL1/.

Could you please let us know if the suggested approach would work for your case? Otherwise, could you please provide us with a more detailed description of the use case?

Looking forward to hearing from you.

Kind regards,
Solomiia

Hello, Rafael!

Thank you for getting back to us and providing more details about your use case.

Addressing your request about getting the array of chart elements from customizeChartElement() API call, please note that the logic of this API cannot be changed to return all the chart elements at once.

Instead of fetching an array of chart elements from the customizeChartElement() API call, we suggest preparing the key-value pairs for members and their colors beforehand. Then, we can use this structure while iterating over the chart elements in customizeChartElement().
We highly recommend using the customizeChartElement() function to adjust chart and legend styles, as this function is triggered every time the chart should be re-rendered, and it will cover the cases with fullscreen and formatting as well as with applying other changes to the report.

The idea lies in the following:

1. On the first load, predefine a structure with members assigning default colors to each of them.

2. If the user changes the color - change the hex in your key-values structure to the new one.

3. If the user changes the slice - add new members to the structure and assign colors to them.

4. Then, having already predefined caption-to-color relation, you can run the customizeChartElement() function taking colors from the structure.

Using this approach, the chart colors are changed in a native way and won't be lost on each change in the report.

Here is the example where we have linked the chart and legend colors in customizeChartElement() using the sample key-value structure: https://jsfiddle.net/flexmonster/vL03jehw/.

You are welcome to use the getReport() and getMembers() API calls to get the members from the legend(for most chart types, members in a legend are the same as in report.slice.columns). For checking updates in the slice, we recommend listening to the reportchange event.

Hope you will find our answer helpful.

Regards,
Solomiia

Hello, Rafael!

Hope you are doing well.

Our team is wondering if you had some time to check out our previous answer. Could you please let us know if you have any further questions about changing the chart colors from UI?

Looking forward to hearing from you.

Kind regards,
Solomiia

Hello, Rafael!

Hope you are having a great week.

Just checking in to ask if our last suggested approach on changing chart colors from UI works well for your case.

Looking forward to hearing your feedback.

Kind regards,
Solomiia

Hello, Rafael!

Thank you for getting back to us.

Kindly note that the described behavior can occur when [Measures] are located as the first item in the columns. We recommend filtering out [Measures] from slice.columns before using getMembers() API call, as shown in the example:

customizeChartElement = (element: Element, data: Flexmonster.ChartData | Flexmonster.ChartLegendItemData): void => {
        //@ts-ignore
        const noMeasuresColumns = this.pivot.flexmonster.getReport().slice.columns.filter(c=>c.uniqueName!=='[Measures]');
        const members = this.pivot.flexmonster.getMembers(noMeasuresColumns[0].uniqueName).map(m => m.caption);
       
        //Members should always be shown
        console.log(members, ' members')
    }

Please note that our generic example has some differences compared to your unique use case and may require some adjustments on your end. This is quite a complicated example, so we recommend carefully analyzing the code before implementing it in your project.

Hope it helps.

Kind regards,
Solomiia

Hello, Rafael!

Hope everything is well.

Just checking in to ask if our example with changing chart colors from the UI was helpful and everything works as expected.

Looking forward to hearing your feedback.

Regards,
Solomiia

Hello, Rafael!

Thank you for getting back to us.

We have fixed the example so the colors are not rearranged when clicking the fullscreen. The idea is to reset the counter on the afterchartdraw event (when the chart is rendered). Please check out the new JSFiddle: https://jsfiddle.net/flexmonster/je51g6wt/.

Our team has also upgraded the example with changing the chart colors using the customizeChartElement API call. You are welcome to check it out: https://jsfiddle.net/flexmonster/xLnrehoz/. The color palettes in the new example can be changed from the "Colors" Toolbar tab.

Please let us know if you have any further questions.

Kind regards,
Solomiia

Hello, Rafael!

Hope you are doing well.

Our team is wondering if you had some time to check our previous response. Could you please let us know if it was helpful?

Looking forward to hearing from you.

Kind regards,
Solomiia

Hello, Rafael!

Hope everything is well.

Just checking in to ask if you have any further questions regarding the provided example.
Our team is also happy to inform you that now the full tutorial on how to customize chart colors using customizeChartElement is on YouTube: https://youtu.be/UPc7MWeHUlA?si=LfSDaBMKosksqQID. You are welcome to check it out.

Looking forward to hearing from you.

Kind regards,
Solomiia