13

I am trying to show a pandas dataframe using flask. I was successfully doing so, until I decided to colour some of the dataframe's rows. In particular I fail when I apply the to_html() method of pandas.

The following code gets a table with some rows colored in yellow:

import pandas as pd
import numpy as np

np.random.seed(24)
df = pd.DataFrame({'A': np.linspace(1, 10, 10)})

df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4), columns=list('BCDE'))],
               axis=1)
df.iloc[0, 2] = np.nan

def highlight_greaterthan(s,threshold,column):
    is_max = pd.Series(data=False, index=s.index)
    is_max[column] = s.loc[column] >= threshold
    return ['background-color: yellow' if is_max.any() else '' for v in is_max]


df = df.style.apply(highlight_greaterthan,threshold=1.0,column=['C','B'], axis=1)
display(df)

Next, when I run to_html() it all crashes.

df_html = df.to_html

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
<ipython-input-28-4d0cc094240b> in <module>()
----> 1 df_html = df.to_html

AttributeError: 'Styler' object has no attribute 'to_html'

Any ideas on how I can preserve the color of the rows? thanks!

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
lucasrodesg
  • 638
  • 1
  • 6
  • 22
  • In this post, https://stackoverflow.com/questions/55355724/pandas-dataframe-to-html-with-inline-styles-instead-of-css, a package `from premailer import transform` can turn the CCS into inline style, it happens that with render() method, when the html is sent out via email, the color is lost. With inline style, the color can still be preserved. – XYZ Dec 22 '22 at 01:44

1 Answers1

11

As the error message indicates, you are trying to use the DataFrame.to_html() method on a Styler object, since df.style.apply returns a Styler object and not a DataFrame.

The docs say you can use the render() method to render the HTML.

Something like this:

style1 = df.style.apply(highlight_greaterthan,threshold=1.0,column=['C','B'], axis=1)
df_html = style1.render()

The output of style1.render() would be:

<style  type="text/css" >
    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col4 {
            background-color:  yellow;
        }</style>  
<table id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3" > 
<thead>    <tr> 
        <th class="blank level0" ></th> 
        <th class="col_heading level0 col0" >A</th> 
        <th class="col_heading level0 col1" >B</th> 
        <th class="col_heading level0 col2" >C</th> 
        <th class="col_heading level0 col3" >D</th> 
        <th class="col_heading level0 col4" >E</th> 
    </tr></thead> 
<tbody>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row0" class="row_heading level0 row0" >0</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col0" class="data row0 col0" >1</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col1" class="data row0 col1" >1.32921</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col2" class="data row0 col2" >nan</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col3" class="data row0 col3" >-0.31628</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col4" class="data row0 col4" >-0.99081</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row1" class="row_heading level0 row1" >1</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col0" class="data row1 col0" >2</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col1" class="data row1 col1" >-1.07082</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col2" class="data row1 col2" >-1.43871</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col3" class="data row1 col3" >0.564417</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col4" class="data row1 col4" >0.295722</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row2" class="row_heading level0 row2" >2</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col0" class="data row2 col0" >3</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col1" class="data row2 col1" >-1.6264</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col2" class="data row2 col2" >0.219565</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col3" class="data row2 col3" >0.678805</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col4" class="data row2 col4" >1.88927</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row3" class="row_heading level0 row3" >3</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col0" class="data row3 col0" >4</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col1" class="data row3 col1" >0.961538</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col2" class="data row3 col2" >0.104011</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col3" class="data row3 col3" >-0.481165</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col4" class="data row3 col4" >0.850229</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row4" class="row_heading level0 row4" >4</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col0" class="data row4 col0" >5</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col1" class="data row4 col1" >1.45342</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col2" class="data row4 col2" >1.05774</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col3" class="data row4 col3" >0.165562</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col4" class="data row4 col4" >0.515018</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row5" class="row_heading level0 row5" >5</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col0" class="data row5 col0" >6</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col1" class="data row5 col1" >-1.33694</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col2" class="data row5 col2" >0.562861</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col3" class="data row5 col3" >1.39285</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col4" class="data row5 col4" >-0.063328</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row6" class="row_heading level0 row6" >6</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col0" class="data row6 col0" >7</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col1" class="data row6 col1" >0.121668</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col2" class="data row6 col2" >1.2076</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col3" class="data row6 col3" >-0.00204021</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col4" class="data row6 col4" >1.6278</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row7" class="row_heading level0 row7" >7</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col0" class="data row7 col0" >8</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col1" class="data row7 col1" >0.354493</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col2" class="data row7 col2" >1.03753</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col3" class="data row7 col3" >-0.385684</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col4" class="data row7 col4" >0.519818</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row8" class="row_heading level0 row8" >8</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col0" class="data row8 col0" >9</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col1" class="data row8 col1" >1.68658</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col2" class="data row8 col2" >-1.32596</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col3" class="data row8 col3" >1.42898</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col4" class="data row8 col4" >-2.08935</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row9" class="row_heading level0 row9" >9</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col0" class="data row9 col0" >10</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col1" class="data row9 col1" >-0.12982</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col2" class="data row9 col2" >0.631523</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col3" class="data row9 col3" >-0.586538</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col4" class="data row9 col4" >0.29072</td> 
    </tr></tbody> 
</table>
Singh
  • 504
  • 4
  • 15
Edgar Ramírez Mondragón
  • 2,912
  • 3
  • 19
  • 34