Dash ag grid tootip to render a dcc graph

Dash Python
1

Does anyone know how if it is possible to render a plotly chart, in the form of a tool tip, when hovering over a cell?

2

Hi @lids !
Welcome on the forum! :tada:

I think it must be possible as you can create your own tooltip component:

2 Likes
3

Here a little example:

Custom Tooltip

JavaScript Component to put in /assets/dashAgGridComponentFunctions.js

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.CustomTooltip = function (props) {
    return React.createElement(
        window.dash_core_components.Graph, {
            figure: props.value,
        })
};
Dash App 
import dash_ag_grid as dag
from dash import Dash, html

import plotly.express as px

app = Dash(__name__)

df = px.data.gapminder().query("continent=='Europe'")
df2 = df.groupby("country")[["lifeExp", "gdpPercap", "pop"]].mean().reset_index()

df2[f"graph"] = ""
for i, r in df2.iterrows():
    filterDf = df[df["country"] == r["country"]]
    fig = px.line(filterDf, x="year", y="lifeExp", title=r["country"], width=400, height=200)
    fig.update_layout(
        margin=dict(l=10, r=10, t=40, b=10),
        paper_bgcolor="LightSteelBlue")
    df2.at[i, "graph"] = fig


columnDefs = [
    {"field": "country"},
    {
        "field": "lifeExp",
        "headerName": "Avg. Life Expectancy (1952-2007)",
        "valueFormatter": {"function": 'd3.format("(,.2f")(params.value)'},
        "tooltipField": "graph",
        "tooltipComponent": "CustomTooltip",
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="custom-component-graph-grid",
            rowData=df2.to_dict("records"),
            columnSize="autoSize",
            columnDefs=columnDefs,
            defaultColDef={"editable": False},
            dashGridOptions={"tooltipShowDelay": 100},
        ),
    ]
)

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

image
image752×421 8.33 KB

4 Likes
5

Thank you so much @Skiks !!

2 Likes
6

Hey @Skiks,

Due to the nature of the tool tip being a plotly visualization. If the cell at the edge of the right or left has a tool tip, when I hover the mouse over it, it will keep disappearing and reappearing. This happens because once the tool tip appears, the mouse would then hover over the plotly chart. Is there any way to ensure the persistence of the tool tip in this sort of cases or to make the tool tip appear above/below/ of the mouse or left/right depending on where the cell is (if the cell is near the right edge, the tool tip should appear to the left)?

7

Hello @lids,

There are a bunch of tooltip customizations available.

Including a delay disappearing, check out the options on the AG grid site.

8

Hey @jinnyzor,

May I know which website you are referring to? Is it the dash ag-grid or the js ag-grid? I would really appreciate it if you could point me in the right direction by referring me to the link.

9

Here is the grid link:

You can also check out the documents on Dash.