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

**URL:** <https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441>\
**Category:** API & Custom Code\
**Created:** [February 15, 2017, 1:14pm UTC](https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441 "2017-02-15T13:14:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![undefinedu38203](https://avatars.discourse-cdn.com/v4/letter/u/c37758/32.png) [@undefinedu38203](https://forums.knack.com/u/undefinedu38203)\
**Post date:** [February 15, 2017, 1:14pm UTC](https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441/1 "2017-02-15T13:14:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Adam64345](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@Adam64345](https://forums.knack.com/u/Adam64345)\
**Post date:** [June 1, 2017, 9:18pm UTC](https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441/2 "2017-06-01T21:18:14Z")

</div>

Thanks! very helpful.

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [June 1, 2017, 9:16pm UTC](https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441/3 "2017-06-01T21:16:57Z")

</div>

See [https://support.knack.com/hc/en-us/community/posts/115007320808-Changing-pie-chart-colors](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](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.

---

<div class="post-metadata">

**Author:** ![Adam64345](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@Adam64345](https://forums.knack.com/u/Adam64345)\
**Post date:** [June 1, 2017, 9:06pm UTC](https://forums.knack.com/t/change-the-colors-of-the-reports-pie-charts-using-css/7441/4 "2017-06-01T21:06:45Z")

</div>

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