Get Free Trial

How to assign colors to Bar and Column charts?

Re-Open
Ralys asked on October 25, 2017

Hello,
I need assign custom colors to Bar and Column charts
How can I do that?
 
Thank you

8 answers

Public
Tanya Gryshko Tanya Gryshko Flexmonster October 27, 2017

Hello, Ralys,
Thank you for writing.
Please check out this example on JSFiddle. We use .fm-charts-color-n to set the color for the n-th chart sector. In this sample, we have specified six colors. The seventh sector is specified with fill: none. This trick is used for repeating custom colors in case there are more than six chart sectors. If the seventh sector was not specified, Flexmonster would use its own colors.
Let me know if the above approach was helpful.
Regards,
Tanya

Public
Ralys October 29, 2017

Hello,
With Pie chart it working
With Bar and Column all bars are colored from .fm-charts-color-1
The .fm-charts-color-2 …n not working
What I am doing wrong?

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster October 31, 2017

Hello Ralys,
Please check the following example – http://jsfiddle.net/flexmonster/wLqupkc5/3/. As you can see, the main difference is that in the first instance the Country field is set for columns but in the second instance it is located in rows. For pie charts pivot uses fields from rows to draw the legend. When it comes to bar and column charts the legend will be drawn from the fields located in columns.
Please let us know if you have any additional questions.
Regards,
Dmytro.

Public
nithinbabu 5 days ago

Hi Dmytro Zvazhii,
@Dmytro Zvazhii

Can you help me on this i have one doubt,
how to change the marked black color header to green any example sharing you the screenshot

Attachments:
row - color.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 5 days ago

Hello,
 
Thank you for contacting us.
 
We suggest using .fm-header-c or .fm-header-r CSS selectors to style columns’ or rows’ headers.
Here is the JSFiddle we prepared for your reference: https://jsfiddle.net/flexmonster/hb3qadfj/.
 
Please let us know if it works for you.
Looking forward to your feedback.
 
Kind regards,
Illia

Public
nithinbabu 5 days ago

Hi Illia,
@Illia Yatsyshyn
Thanks for your reply, but I dont want to use the CSS class I could have used this but multiple place i am using this table cell and it may overide the css class,

If you can provide me using a function like customizecell(data, header) {
.addClass()
}
 
something in this level would be much appreciated, Please do the needful very much stuck.
Provide a jsFiddle example:

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 5 days ago

Hello,
 
You can use the customizeFunction hook to customize headers of the desired hierarchy instead: https://jsfiddle.net/flexmonster/kptjnzsw/.
 
Please let us know if it helps.
 
Regards,
Illia

Public
nithinbabu 5 days ago

Hi,

@Illia Yatsyshyn It worked thank you…

Please login or Register to Submit Answer