Get Free Trial

How to assign colors to Bar and Column charts?

Answered
Ralys asked on October 25, 2017

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

12 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 September 22, 2021

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 September 22, 2021

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 September 22, 2021

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 September 22, 2021

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 September 22, 2021

Hi,

@Illia Yatsyshyn It worked thank you…

Public
nithinbabu October 7, 2021

Hi @Illia Yatsyshyn 

I have the JSON response this way and i am attaching the screenshot kindly let me know how to render the JSON and get the pivot-container this format

Kindly please help very much stuck 

the below response should render in the attached JPG  – format
[
{
“product”: “ACILIAN”,
“semifinished”: “”,
“date”: “2021-09-29”,
“value”: 1111,
“type”: “FG”,
“violationcode”: “red”
},
{
“product”: “ACILIAN”,
“semifinished”: “DEA”,
“date”: “2021-09-28”,
“value”: 33333,
“type”: “SFG”,
“violationcode”: “yellow”
},
{
“product”: “ACILIAN”,
“semifinished”: “DEN”,
“date”: “2021-09-30”,
“value”: 4444,
“type”: “SFG”,
“violationcode”: “red”
},
{
“product”: “PQS “,
“semifinished”: “”,
“date”: “2021-09-30”,
“value”: 55555,
“type”: “FG”,
“violationcode”: “yellow”
},
{
“product”: “PQS “,
“semifinished”: “JÓDMESAC”,
“date”: “2021-09-29”,
“value”: 4444,
“type”: “SFG”,
“violationcode”: “white”
},
{
“product”: “PQS “,
“semifinished”: “VE”,
“date”: “2021-09-28”,
“value”: 66666,
“type”: “SFG”,
“violationcode”: “yellow”
}
]
 
 

Attachments:
wip - screen.JPG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 7, 2021

Hello,
 
It seems we answered your question in the following ticket: pivot’ is declared but its value is never read.ts • Flexmonster. Please follow the link to check out our response.
 
Feel free to contact us if other questions arise.
 
Kind regards,
Illia

Public
nithinbabu October 7, 2021

Hi Illia,

https://dev.bodhee.io/imp/apigateway/api/imp/wip
 
the above API I am using I am getting data but not responding to the page Its not binding to HTML event
I will share you the stackblitz, Kindly look and please do help to render data.
 
https://stackblitz.com/edit/angular-ivy-c6gobs?file=src/app/app.component.ts
 
It pretty urgent, Kindly do help

Attachments:
wip - screen.JPG

Public
Vera Didenko Vera Didenko Flexmonster October 11, 2021

Hello,
 
Thank you for reaching out.
 
It seems our team addressed this issue in the following support ticket: https://www.flexmonster.com/question/pivot-is-declared-but-its-value-is-never-read-ts/#answer-40552.
In the response, we provided an example where data from a sample API endpoint is loaded in Flexmonster (see our answer).
 
Also, please raise a new ticket for each separate case. Having each case in a separate ticket will help keep all the details organized for future reference.
 
Many thanks!

Kind regards,
Vera

Please login or Register to Submit Answer