Jump to content
  • 0

Change the background color in Pivot Chart



Does anyone know a formula or a way to set up a logic in Caspio for the condition below?

If the car is **Available**, the background color will turn green,

If the car is **Service**, the background color will turn red,

If the car is **Office Based**,the background color will turn orange,

if the criteria above were not met, the background will remain in white color

I would appreciate all suggestions. 

Thank you.




Screenshot 2022-09-05 101806.png

Edited by alexmshcare
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Hello @alexmshcare,

If you need to apply the background color to all the fields on your Pivot table except the first field, please teat the following code.

Add the Footer element, disable the HTML editor on the Advanced tab before pasting the code, and paste this code into the Footer:

    document.addEventListener('DataPageReady', colorHandler);

    function colorHandler() {

        const pivotFields = document.querySelectorAll('td:not(td:nth-child(1))'); 

        pivotFields.forEach(cell => {
         if (cell.innerHTML === '**Available**') {
                cell.style.backgroundColor = '#66c66d';
         else if (cell.innerHTML === '**Service**') {
                cell.style.backgroundColor = '#ff5a4b';
         else if (cell.innerHTML === '**Office Based**') {
                cell.style.backgroundColor = '#ff9b3c';

  document.removeEventListener('DataPageReady', colorHandler);



You may change the HEX color codes in the code above.

This is the result I received:



Hope this helps.

Feel free to update this thread if you need further assistance with a solution. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...