Implement SparklineBarFormatter to customise bar sparklines

[amp36]

We already have a valueFormatter, it would be nice to be able to customise sparklines using a formatter in sparklineOptions
https://www.ag-grid.com/javascript-data-grid/sparklines-bar-customisation/#barsparklineoptions

[BSd3v]

Hello @amp36,

Please check out here to see if this helps.

https://www.ag-grid.com/react-data-grid/sparklines-data/#formatting-sparkline-data

This isnt really something that we can add to the grid, but would have to be something that ag-grid handles itself.

[amp36]

It seems like I should be able to pass a formatter function into sparklineOptions in columnDefs like this:

columnDefs = [
    {'field': 'direction'},
    {
        'field': 'frequency',
        "cellRenderer": "agSparklineCellRenderer",
        "cellRendererParams": {
            "sparklineOptions": {
                "type": "bar",
                "formatter": {"function": 'return { "fill": params.yValue < 0 ? "#ab3326" : "#399e1b" };'},
                "fill": '#5470c6',
                "stroke": '#91cc75',
                "highlightStyle": {
                    "fill": '#fac858'
                },
                "valueAxisDomain": [-50, 50],
            },
        },
    },
]

However, the error I get in the console is that Uncaught TypeError: o is not a function, and it appears that the function is being passed as an object rather than as valid javascript by dash

[BSd3v]

Ok, yes, I see the issue now.

We will need to add this functionality in our next release. Probably going to try to work with more Enterprise features.

[AnnMarieW]

Hi @amp36

You can make the whole cellRendererParams a function. Below is a complete minimal example.

Note that you can also use components such as dbc.Progress. You can find an example in the preliminary docs (it hasn't been added to the dash docs yet) https://dashaggrid.pythonanywhere.com/components/cell-renderer

---

SparlinkeBarFormatter example:

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

rowData = [
    {
        "symbol": "A",
        "name": "Agilent Technologies Inc. Common Stock",
        "change": [0.9, 0.8],
        "volume": "$971,760",
    },
    {
        "symbol": "AAL",
        "name": "American Airlines Group Inc. Common Stock",
        "change": [0.2, 0.3],
        "volume": "$20,309,670",
    },
    {
        "symbol": "AAP",
        "name": "Advance Auto Parts Inc Advance Auto Parts Inc W/I",
        "change": [0.4, 0.1],
        "volume": "$699,427",
    },
    {
        "symbol": "AAPL",
        "name": "Apple Inc. Common Stock",
        "change": [0.5, 0.7],
        "volume": "$57,807,909",
    },
]

columnDefs = [
    {"field": "symbol", "maxWidth": 120},
    {"field": "name", "minWidth": 250},
    {
        "field": "change",
        "cellRenderer": "agSparklineCellRenderer",
        "cellRendererParams": {"function": "sparklineBarCellRendererParams"},
    },
    {
        "field": "volume",
        "type": "numericColumn",
        "maxWidth": 140,
    },
]

defaultColDef = {
    "flex": 1,
    "minWidth": 100,
    "resizable": True,
}


app.layout = html.Div(
    [
        dag.AgGrid(
            enableEnterpriseModules=True,
            rowData=rowData,
            defaultColDef=defaultColDef,
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            dashGridOptions={"rowHeight": 50},
        ),
    ],
    style={"margin": 20},
)

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


"""
Add the following to the dashAgGridFunctions.js file in  /assets


var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

function sparklineBarFormatter(params) {
  const { yValue } = params;
  return {
    fill: yValue <= .20 ? '#4fa2d9' : yValue < .60 ? '#277cb5' : '#195176',
  };
}

dagfuncs.sparklineBarCellRendererParams = {
    sparklineOptions: {
      type: 'bar',
    //  fill: '#5470c6',
      stroke: '#91cc75',
      highlightStyle: {
        fill: '#fac858',
      },
      valueAxisDomain: [0, 1],
      paddingOuter: 0,
      padding: {
        top: 0,
        bottom: 0,
      },
      axis: {
        strokeWidth: 0,
      },
      formatter: sparklineBarFormatter
    },
  }




"""