Shilpa
Published in : 2022-02-27
I am using the PrimeNg library to show statistics for my client's application data.
Let's say, I have 3 entities (legends) to show on the pie chart. I can give fix color codes in hex like ('#3366CC', '#DC3912', '#FF9900'), so it will render 3 colors for different percentages of the pie portion.
I am trying to show number of records with different colors, with respective percentage of portion dynamically, so let's say - I have 4 or 8 or 15 number of legends to show, How do I manage colors?
Issue: It takes same color that I gave in the color format. For more legends, it should show different colors?
How do I fix this issue to show a pie chart with multiple colors?
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Rakshit Date : 2022-02-28
Best answers
34
Best answers
34
PrimeNg library uses Chart.js internally. So you can add following code to your component. Let's say, your max number of legends will be 15, so add 15 to 20 colors to the below array.
If you don't know about color coding and hash codes of different colors, I recommend you to go through ColorPalette; It will give you the best color combinations.
Now, set up a routine to map the dataset into our set of default colors for each pie charts.
After that, call your routine,
Bingo, you did it, now you will have multiple funky colors ready for your Pie Charts, Same logic is also applicable for Bar, Line or bubble charts.
References: For more information, you can visit Beingcoders, Chart.js , and ColorPalette.