Color rows of pandas dataframe and convert to HTML table
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!
Answer
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>