How to create separate dot plots within a table for each row

Hi Everyone
I am new to plotly and dash. Is there any way by which we can create dot plots within a table. There will be separate dot plot for every row. Sharing the example link: Clinical Analytics Dashboard (please refer table Patient Wait Time and Satisfactory Scores)

Hi @soumyadip !
Welcome on the Forum! :tada:

You can dig into the example you linked here.
It seems this example uses <div> elements as containers to create a kind of table.

However I would suggest to use Dash AG Grid, you can easily use graphs in cells.
Take a look at this example:

And you will have all the features of Dash AG Grid available, like sorting, filtering, editing the cells, resize the columns… :grin:


Hi @Skiks
Thanks a lot for the prompt help!! It looks promising :slight_smile:
Would it be possible to achieve the same using Dash Data Table instead of AG Grid (as it looks heavy on JS)

Hey @soumyadip !

I didn’t use DataTable a lot, it seems indeed lighter than Dash AG Grid but I think it is not possible to insert Graphs in cells…
If performance can be an issue with your dataset, you can try to use Infinite row model:

That will load the rows as the user is scrolling, not all the rows at once when the app starts.

Lastly if you really need something lighter, with no table features, using <div> containers arranged in grid similar to table cells, like the app you linked, seems a good alternative !

1 Like

I have implemented this using AG Grid as you suggested, It worked !! :slight_smile: