Change the colors of the reports (pie charts) using CSS

API & Custom Code
1

Has anyone used the custom CSS field to manipulate the colors in the reports? I managed to change the entire pie chart color at once, I can't do it individually.

(I have no CSS background at all)

Here is what I have done so far:

#highcharts-0 path{
fill: rgb(255, 0, 0);
d: path('M 239.974 10 A 127.5 127.5 0 0 1 352.915 78.2841 L 240 137.5 A 0 0 0 0 0 240 137.5 Z');
stroke: rgb(255, 255, 255);
stroke-width: 1;
stroke-linejoin: round;
!important;}

Any ideas?

THANK YOU

2

Thanks! very helpful.

3

See https://support.knack.com/hc/en-us/community/posts/115007320808-Changing-pie-chart-colors

And it's worth getting to know a web browsers inspection tools (I use Chrome) with Knack's instructions on how to find the right CSS selector here: https://www.knack.com/developer-documentation/#finding-the-right-css-selectors

The trick with a pie chart will be to choose the right path: child to change color assuming that the category elements don't change order. If they do then some custom JavaScript would be needed to iterate through each child (pie slice) and change the fill color for the right item.

And that's before dealing with the legend color.

4

I'm having this same issue. Has anyone managed to figure it out?