Plotly Color Scales for Dash AgGrid Columns

Happy to share a simple package that I just created, which allows you to highlight values in AgGrid tables using any of the available Plotly color scales. Currently available:

  • qualitative
  • sequential
  • diverging
  • bar (bar charts, not really a color scale)

Todo: Add cyclical, and diverging scales


How to use:

from dash import Dash, html
import dash_aggrid_scales as das
from dash_ag_grid import AgGrid

app = Dash()

app.layout = html.Div([

AgGrid(
   rowData=df.to_dict("records"),
    columnDefs=[
        {
            "field": "nation",
            "cellStyle": {"styleConditions": das.qualitative(medals["nation"])},
        },
        {
            "field": "medal",
            "headerName": "medal (qualitative)",
            "cellStyle": {"styleConditions": das.qualitative(medals["medal"], colorscale="Safe")},
        },
        {
            "field": "count",
            "headerName": "count (sequential)",
            "cellStyle": {"styleConditions": das.sequential(medals["count"], colorscale='cividis')},
        },
        {
            "field": "count",
            "cellStyle": {"styleConditions": das.bar(medals["count"])},
        },
    ])
])

The approach for colorscales was taken and adapted form the official docs, for the bar chart I adapted the approach of @AnnMarieW . Thanks!

Please let me know if you have any suggestions.

3 Likes

Hey @eliasdabbas

This is awesome! Thanks for sharing :tada:

1 Like

Thanks to you as well! All the examples and code. I use them a lot :slight_smile:

1 Like

Awesome component, @eliasdabbas
Yesterday I added it to the Dash community Components Index. :tada:

1 Like

Oh thanks!

That’s great.

:pray:

Awesome! I will use it. :slightly_smiling_face:

1 Like

This is cool. Will you be adding a license to your repository?

1 Like

Thanks!

Yes, good idea. I just added a license file.

@adamschroeder

I just created a simple website for the package, including an interactive table for developers to experiment with various scales and options:

https://dash-aggrid-scales.com/

Will be adding more complete docs and code examples soon.

1 Like

Awesome. Thank you @eliasdabbas . I just added your website to the components index as the last column. Thank you for putting it together.

1 Like

Thanks @adamschroeder ! :slight_smile: