I have a python dash app and am applying conditional formatting to cells depending on if their values are less than (green) or greater than (red) specified values. Some of my cells are blank and it is taking them as being less than the specified value and highlighting them green.

I'd like for blank cells to remain as default. Below is an example snippet.

{"field":"Display name"}, 
        {"field":"Adult Head",
        'cellStyle': {"styleConditions": [{"condition": "params.value <= 880","style": {"backgroundColor": "#16F529"}},
        {"condition": "params.value > 880","style": {"backgroundColor": "#FD1C03"}}]}},

I tried to also add a condition on null cells:

{"condition": "params.value == null","style": {"backgroundColor": "#FFFFFF"}}

But this does nothing. These blanks are nan's in the dataframe being read in. I don't know javascript so perhaps I'm just not setting the correct check?

Thanks for any input.

I have a python dash app and am applying conditional formatting to cells depending on if their values are less than (green) or greater than (red) specified values. Some of my cells are blank and it is taking them as being less than the specified value and highlighting them green.

I'd like for blank cells to remain as default. Below is an example snippet.

{"field":"Display name"}, 
        {"field":"Adult Head",
        'cellStyle': {"styleConditions": [{"condition": "params.value <= 880","style": {"backgroundColor": "#16F529"}},
        {"condition": "params.value > 880","style": {"backgroundColor": "#FD1C03"}}]}},

I tried to also add a condition on null cells:

{"condition": "params.value == null","style": {"backgroundColor": "#FFFFFF"}}

But this does nothing. These blanks are nan's in the dataframe being read in. I don't know javascript so perhaps I'm just not setting the correct check?

Thanks for any input.

• python
• ag-grid
• plotly-dash

1 Answer 1

I didn't think to try ChatGPT before.

It gave me the following solution but it does nothing (not even set the greens/reds..

{"field":"Adult CAP", 'tooltipValueGetter': {"function": "params.data.DRLcount + ' scans included'"},
        'cellStyle': {
            # This function checks for empty values (None or empty string)
            'function': '''
                function(params) {
                    // Check if the value is null, undefined, or empty
                    if (params.value === null || params.value === undefined || params.value === '') {
                        return null; // No style applied for empty cells
                    }
                    // Apply some style conditions if the cell is not empty
                    if (params.value > 7) {
                        return { backgroundColor: 'redn' };
                    } else {
                        return { backgroundColor: 'green' };
                    }
                }
            '''
        }

I also tried forcing nan's to zeroes and then the following:

{"field":"Adult CAP", 'tooltipValueGetter': {"function": "params.data.DRLcount + ' scans included'"},
        'cellStyle': {"styleConditions": [{"condition": "0 > params.value <= 11","style": {"backgroundColor": "#16F529"}},
        {"condition": "params.value > 11","style": {"backgroundColor": "#FD1C03"}}, {"condition": "params.value == 0","style": {"backgroundColor": "#FD1C03"}}]}},

It still colours my 0's green?