# How to use Chart.js inside dash Ag grid? Please suggest

**URL:** <https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990>\
**Category:** Dash Python\
**Created:** [November 9, 2023, 12:10pm UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990 "2023-11-09T12:10:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AZAM](https://avatars.discourse-cdn.com/v4/letter/a/ea666f/32.png) [@AZAM](https://community.plotly.com/u/AZAM)\
**Post date:** [November 9, 2023, 12:10pm UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990/1 "2023-11-09T12:10:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/5/b5ef6e7ea8afb20f8c5da8c5acc6a554dd74ed4a.png)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/8/48f1fe4e6238a41a2572e9eaeceeebde604215ba.png)

---

<div class="post-metadata">

**Author:** ![TARpa](https://avatars.discourse-cdn.com/v4/letter/t/439d5e/32.png) [@TARpa](https://community.plotly.com/u/TARpa)\
**Post date:** [November 9, 2023, 12:36pm UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990/2 "2023-11-09T12:36:10Z")

</div>

I’d like to know this too.

You can add Plotly graphs to the grid.

Example:

> <https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Ag-Grid/custom-components>
>
> //github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Ag-Grid/custom-components

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [November 9, 2023, 1:50pm UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990/3 "2023-11-09T13:50:36Z")

</div>

Hello @AZAM and @TARpa,

You can do this by first having the chartjs imported to the app, then you need to make a cellRenderer that will be used to pass the data to the chartjs function to create the chart.

---

<div class="post-metadata">

**Author:** ![bgivens33](https://avatars.discourse-cdn.com/v4/letter/b/e68b1a/32.png) [@bgivens33](https://community.plotly.com/u/bgivens33)\
**Post date:** [November 9, 2023, 3:31pm UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990/4 "2023-11-09T15:31:39Z")

</div>

@waleedmalik has also ported over ChartJS into Dash, which might be helpful, haven’t used it yet, but might be useful.

> [@Dash Chart.js Component](https://community.plotly.com/t/dash-chart-js-component/68266):
>
> Hello everyone! Just created a Dash component for [react-chartjs-2](https://react-chartjs-2.js.org/) and thought about sharing it with you guys. [Dash\_Chartjs\_Component] PyPi: [Click here](https://pypi.org/project/dash-chartjs/) Github: [Click here](https://github.com/zenalytiks/dash-chartjs) Cheers!

---

<div class="post-metadata">

**Author:** ![DaveG](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/daveg/32/32233_2.png) [@DaveG](https://community.plotly.com/u/DaveG)\
**Post date:** [November 10, 2023, 12:13am UTC](https://community.plotly.com/t/how-to-use-chart-js-inside-dash-ag-grid-please-suggest/79990/5 "2023-11-10T00:13:16Z")

</div>

@bgivens33 you beat me to it!