How to change the bar color for the chart.

Hello, Mark!
 
Thank you for your question.
 
Kindly note that there are two possible ways to change the default red color of the Flexmonster Pivot charts:
 
1. Overriding default CSS styles
By default, our charts contain 7 repeating colors, which can be changed by overriding the following classes:

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

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

You can also set different color sets for different charts by adding the container id before the class name in the example above.
We have prepared a JSFiddle sample for illustration: https://jsfiddle.net/flexmonster/51p2mjrh/.
 
2. Using customizeChartElement function
For more specific cases, for example, to highlight a member with specific color regardless of its position, we recommend using customizeChartElement function.
You can look through our step-to-step guide for more details about this approach: https://www.flexmonster.com/doc/customizing-pivot-charts/.
 
Hope you will find our answer helpful.
 
Kind regards,
Solomiia

Hello, Mark!

Hope you are doing well.

Our team is wondering if you had a chance to check out our example with changed chart colors. Could you please let us know if it helps?

Looking forward to hearing your response.

Kind regards,
Solomiia

Hello, Mark!

Hope you are having a great week.

Just checking in to ask if our example with changed chart colors was helpful.

Looking forward to your feedback.

Regards,
Solomiia

Hello, Mark!

Thank you for your feedback.

We are glad to hear that our solution was helpful.

Feel free to reach out to us in case of any other questions.

Kind regards,
Solomiia

Hello, Mark!
 
Thank you for getting back to us. 
 
The provided code snippet works fine on our side. We have also included it in the JSFiddle sample for illustration: https://jsfiddle.net/flexmonster/yc6tmLxh/.
We kindly suggest checking the path to the styles file in your project, as it may be causing the issue.
If that doesn't help, could you please provide us with the JSFiddle sample where the described behavior is reproducible?
 
Looking forward to hearing from you.
 
Kind regards,
Solomiia

Hello, Mark!
 
Thank you for your swift response.
 
Kindly note that the colors in Flexmonster Pivot Charts by design are added to distinguish the different members from the legend, while the text values under each bar represent the member of the corresponding bar.
 
To achieve the desired visualization, you can swap the fields in columns and rows, as in the following sample: https://jsfiddle.net/flexmonster/Lq7fpnr5/. This can be done manually or using our reversedAxes property: https://www.flexmonster.com/api/chart-options-object/#reversedaxes.
 
For more advanced charting settings, we recommend looking through our 3rd party charting libraries integrations: https://www.flexmonster.com/doc/available-tutorials-charts/#3rd-party-charts.
 
Hope it helps.
Feel free to contact us in case of any other questions.
 
Regards,
Solomiia

Hello, Mark!

Thank you for your feedback.

We are glad to hear the suggested approach works for you.

Feel free to contact us if any other questions arise.

Regards,
Solomiia