[Python Dash Table] Conditionally highlight table rows

Dash Python
,
1

Hi
I am trying to format a table.
my dataframe is like

df = pd.DataFrame({
    'bid_qty': [1000, 100, 30], 
    'bid_price': [96, 95, 94], 
    'offer_price': [97, 99, 100],
    'offer_qty': [100, 213, 500], 
})

I want to highlight 'bid_qty' and 'bid_price' based on 'bid_qty' values. Higher qty corresponds to darker color.
Same rules applys to 'offer_qty' and 'offer_price'

Ideally the table should be like .
image

However, this specific case is not covered in documentation .
I followed the documentation but could only make it like
image

Here is my code :


def discrete_background_color_bins(df, n_bins=5, ):
    import colorlover
    bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)]
 
    df_max = df_numeric_columns.max().max()
    df_min = df_numeric_columns.min().min()
    ranges = [
        ((df_max_bid - df_min_bid ) * i) + df_min
        for i in bounds
    ]
    styles = []
    legend = []
    for i in range(1, len(bounds)):
        min_bound = ranges[i - 1]
        max_bound = ranges[i]
        backgroundColor_bid = colorlover.scales[str(n_bins)]['seq']['YlGn'][i - 1]
        backgroundColor_offer = colorlover.scales[str(n_bins)]['seq']['Reds'][i - 1]
        color = 'white' if i > len(bounds) / 2. else 'inherit'

        for column in df[['bid_qty']]:
            styles.append({
                'if': {
                    'filter_query': (
                        '{{{column}}} >= {min_bound}' +
                        (' && {{{column}}} < {max_bound}' if (i < len(bounds) - 1) else '')
                    ).format(column=column, min_bound=min_bound, max_bound=max_bound),
                    'column_id': column
                },
                'backgroundColor': backgroundColor_bid ,
                'color': color
            })
        for column in df[['offer_qty']]:
            styles.append({
                'if': {
                    'filter_query': (
                        '{{{column}}} >= {min_bound}' +
                        (' && {{{column}}} < {max_bound}' if (i < len(bounds) - 1) else '')
                    ).format(column=column, min_bound=min_bound, max_bound=max_bound),
                    'column_id': column
                },
                'backgroundColor': backgroundColor_offer ,
                'color': color
            })


        legend.append(
            html.Div(style={'display': 'inline-block', 'width': '60px'}, children=[
                html.Div(
                    style={
                        'backgroundColor': backgroundColor_bid ,
                        'borderLeft': '1px rgb(50, 50, 50) solid',
                        'height': '10px'
                    }
                ),
                html.Div(
                    style={
                        'backgroundColor': backgroundColor_offer ,
                        'borderLeft': '1px rgb(50, 50, 50) solid',
                        'height': '10px'
                    }
                ),
                html.Small(round(min_bound, 2), style={'paddingLeft': '2px'})
            ])
        )

    return (styles, html.Div(legend, style={'padding': '5px 0 5px 0'}))

Is there anyway I can also higlight 'bid_price' and 'offer_price' following 'bid_qty' and 'offer_qty' ?

Can someone advise ?
Thanks !!

2

Hi,

Please take a look on the examples using style_data_conditional here:

In particular, I would recommend the example under " Highlighting cells by value with a colorscale like a heatmap", which is basically what you are looking for.

As a side note, please be aware that you can pass a list to column_id in the condition dictionary, so you don’t have to repeat it for both columns.

3

Thanks @jlfsjunior .
I read through the documentation but did not find the solution to my answer.
Any hints ?
Thanks

4

As I mentioned in my edited post, you can pass "column_id": ["bid_qty", "bid_price"] and the same to ask.

1 Like
5

Thank you !!!
@jlfsjunior I knew I was very close