Color DataTable From python dash with color dataframe

Question

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

data_color = OrderedDict(
    [
        ("Date", ["#26118f", "#ce1177", "#26118f", "#26118f", "#26118f", "#26118f"]),
        ("Region", ["#ce1177", "#26118f", "#ce1177", "#ce1177", "#ce1177", "#ce1177"]),
        ("Temperature", ["#ce1177", "#ce1177", "#26118f", "#ce1177", "#ce1177", "#ce1177"]),
        ("Humidity", ["#26118f", "#ce1175", "#ce1177", "#ce1177", "#ce1177", "#ce1177"]),
        ("Pressure", ["#cf1177", "#ce1173", "#ce1177", "#ce1177", "#ce1177", "#ce1177"]),
    ]
)

df_color = pd.DataFrame(data_color)


app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
)

if __name__ == '__main__':
    app.run_server(debug=True)

I have a data frame displayed as a data table. I have another same sized data frame with colours. I want to fill each cell with the corresponding color in the other dataframe. How can I do this?

r-beginners · Accepted Answer · 2022-06-30 02:13:58Z

2

The code in question refers to the official reference, but the color coding can be completed by using the example on that page to set the color values of the column data of the same name for the data in the table, where a color is defined for each column name. The ability to change the color for each column in the header was not found at the stage of my research.

Update

To set the background color for a unit of cells, the color setting is conditioned on the row index and column name. Prepare a list, take a row from the data frame, and create a dictionary of background colors using the contents of that row as a secondary loop process. Add that created dictionary to the list.

c_list = []
cols = ['Date', 'Region', 'Temperature', 'Humidity', 'Pressure']

for row in df_color.itertuples():
    for i in range(len(cols)):
        color_dict = {}
        color_dict.update(
            {
                 'if':{'row_index': row[0], 'column_id': cols[i]},
                 'backgroundColor': row[i+1]
            }
        )
        c_list.append(color_dict)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_data_conditional=c_list
)

if __name__ == '__main__':
    app.run_server(debug=True)

edited Jun 30, 2022 at 2:13

answered Jun 29, 2022 at 13:14

r-beginners

35.6k3 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3680510 Over a year ago

yes but this is just an example. the colours in each cell could be different.

r-beginners Over a year ago

There was no requirement for that in the description or in the data, so we are getting unique values and color-coding them. Please update the color data per cell and the question. For the benefit of other users.

user3680510 Over a year ago

yeah ok now it has not the same value in every column. I stated that boths data frames have the same size. So I thought it is clear, that the color is indexed by position and not column position. But I understand that the data hinted to use this workaround..

Collectives™ on Stack Overflow

Color DataTable From python dash with color dataframe

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related