AG Grid Rendering Plotly Charts in Django Dash

I’m trying to use Dash AG Grid with plots in the columns.

# Example of the table columnDefs
columnDefs = [
        'field': 'Value A',
        'headerName': 'Value A',

        'field': 'Charts',
        'headerName': 'Charts',
        'cellRenderer': 'DCC_GraphClickData'

This works when using Dash with this function for rendering in static/assets/rendering.js:

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

dagcomponentfuncs.DCC_GraphClickData = function (props) {
    const {setData} = props;
    function setProps() {
        const graphProps = arguments[0];
        if (graphProps['clickData']) {
    return React.createElement(window.dash_core_components.Graph, {
        figure: props.value,
        style: {height: '100%'},
        config: {displayModeBar: false, 'staticPlot': true},

However, I cannot achieve the same functionality in Django Dash. I’ve tried adding the JavaScript with:


However, it doesn’t work, and when I inspect the element on the page, it says
'AG Grid could not find ‘DCC_GraphClickData’ component. Check that it has been registered as described in JavaScript Data Grid: Components

I’ve also tried assigning it directly in columnDefs to “cellRenderer” by putting the JavaScript function in triple quotes.

Hello @TARpa,

What library are you using for Dash Django/DAG?

I’m using django-plotly-dash

And what version of dash-ag-grid?

dash-ag-grid ==2.3.0

Is your script loading properly?

Thanks for your help, your question/comment led me on the right path. It works if I provide the full URL to the file like this:

app = DjangoDash('app_name', external_scripts=['http://<host-name>/assets/js/rendering.js'])

1 Like