AGGRID: agSparklineCellRenderer and "formatter" params

Dash Python
1

Hey everyone,

I am using the agSparklineCellRenderer component, but I am having trouble styling it based on its values. I want the color to be red for numbers less than 0 and green for numbers greater than 0. It is important to mention that the values are structured like [ x ].

The references are:

“cellRenderer”: “agSparklineCellRenderer”,
“cellRendererParams”: {
“sparklineOptions”: {
“type”: “bar”,
“formatter”: {“function”: “params.value[0] < 0 ? {fill: #5470c6} : {fill: #a90000}”},
“valueAxisDomain”: [-15, 15],
“paddingOuter”: 0,
“padding”: {
“top”: 0,
“bottom”: 0,
},
“label”: {
“enabled”: True,
“fontWeight”: “bold”,
“placement”: “outsideEnd”,
},
}
}

2

Hello @Drii,

Is it possible for you to provide a complete working example for troubleshooting?

3

Hey @jinnyzor

This is what I am expecting to get:
image

The logic would follow this example for progress bar:

In order words, the fill would differ depend on the value.

Thank you!

Adriana

4

Something like this?

image
image1915×378 15.9 KB

Summary 
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, no_update, Patch
import pandas as pd
import json

app = Dash(__name__)


df = pd.DataFrame(
    [
        {
            "symbol": 'AIG',
            "name": 'American International Group Inc. New Common Stock',
            "change": [-0.4, 0.1],
            "volume": '$4,556,709',
        },
        {
            "symbol": 'AIZ',
            "name": 'Assurant Inc. Common Stock',
            "change": [-0.3, 0.3],
            "volume": '$269,804',
        },
        {
            "symbol": 'AJG',
            "name": 'Arthur J. Gallagher & Co. Common Stock',
            "change": [-0.8, 0.9],
            "volume": '$1,114,620',
        },
        {
            "symbol": 'AKAM',
            "name": 'Akamai Technologies Inc. Common Stock',
            "change": [-0.9, 0.9],
            "volume": '$910,724',
        },
        {
            "symbol": 'ALB',
            "name": 'Albemarle Corporation Common Stock',
            "change": [-0.6, 0.7],
            "volume": '$860,457',
        },
        {
            "symbol": 'ALC',
            "name": 'Alcon Inc. Ordinary Shares',
            "change": [-0.4, 0.6],
            "volume": '$441,966',
        },
        {
            "symbol": 'ALGN',
            "name": 'Align Technology Inc. Common Stock',
            "change": [-0.1, 0.3],
            "volume": '$356,643',
        },
        {
            "symbol": 'ALL',
            "name": 'Allstate Corporation (The) Common Stock',
            "change": [-0.2, 0.9],
            "volume": '$1,405,300',
        }]
)


columnDefs = [
    { "field": "symbol", "maxWidth": 120 },
    { 'field': "name", "minWidth": 250 },
    {
      "field": "change",
      "cellRenderer": "agSparklineCellRenderer",
      "cellRendererParams": {
        "sparklineOptions": {
          "type": "bar",
          "stroke": "#91cc75",
          "highlightStyle": {
            "fill": "#fac858",
          },
          "valueAxisDomain": [-1, 1],
          "paddingOuter": 0,
          "padding": {
            "top": 0,
            "bottom": 0,
          },
          "axis": {
            "strokeWidth": 0,
          },
        },
      },
    },
    {
      "field": "volume",
      "type": "numericColumn",
      "maxWidth": 140,
    },
  ]

app.layout = html.Div(
    [
        dag.AgGrid(
             id="sparkline-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"animateRows": False},
            enableEnterpriseModules=True,
            defaultColDef={"flex": 1,
      "minWidth": 100,}
        ),
    ]
)

app.clientside_callback(
    """(id) => {
        dash_ag_grid.getApiAsync(id).then((grid) => {
            currentDefs = grid.getGridOption('columnDefs')
            currentDefs[2]['cellRendererParams']['sparklineOptions']['formatter'] = (params) => {
            const { yValue, highlighted } = params;
              if (highlighted) {
                return;
              }
              return { fill: yValue < 0 ? "red" : "blue" };
            };
            grid.setGridOption('columnDefs', currentDefs)
        })
        return window.dash_clientside.no_update
    }""",
    Output('sparkline-grid', 'id'),
    Input('sparkline-grid', 'id')
)


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

Another way:

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, no_update, Patch
import pandas as pd
import json

app = Dash(__name__)


df = pd.DataFrame(
    [
        {
            "symbol": 'AIG',
            "name": 'American International Group Inc. New Common Stock',
            "change": [-0.4, 0.1],
            "volume": '$4,556,709',
        },
        {
            "symbol": 'AIZ',
            "name": 'Assurant Inc. Common Stock',
            "change": [-0.3, 0.3],
            "volume": '$269,804',
        },
        {
            "symbol": 'AJG',
            "name": 'Arthur J. Gallagher & Co. Common Stock',
            "change": [-0.8, 0.9],
            "volume": '$1,114,620',
        },
        {
            "symbol": 'AKAM',
            "name": 'Akamai Technologies Inc. Common Stock',
            "change": [-0.9, 0.9],
            "volume": '$910,724',
        },
        {
            "symbol": 'ALB',
            "name": 'Albemarle Corporation Common Stock',
            "change": [-0.6, 0.7],
            "volume": '$860,457',
        },
        {
            "symbol": 'ALC',
            "name": 'Alcon Inc. Ordinary Shares',
            "change": [-0.4, 0.6],
            "volume": '$441,966',
        },
        {
            "symbol": 'ALGN',
            "name": 'Align Technology Inc. Common Stock',
            "change": [-0.1, 0.3],
            "volume": '$356,643',
        },
        {
            "symbol": 'ALL',
            "name": 'Allstate Corporation (The) Common Stock',
            "change": [-0.2, 0.9],
            "volume": '$1,405,300',
        }]
)


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

app.layout = html.Div(
    [
        dag.AgGrid(
             id="sparkline-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            dashGridOptions={"animateRows": False},
            enableEnterpriseModules=True,
            defaultColDef={"flex": 1,
      "minWidth": 100,}
        ),
    ]
)


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

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

dagfuncs.myCellRenderer = (params) => {
        return {
        "sparklineOptions": {

          "type": "bar",
          "stroke": "#91cc75",
          "highlightStyle": {
            "fill": "#fac858",
          },
          "valueAxisDomain": [-1, 1],
          "paddingOuter": 0,
          "padding": {
            "top": 0,
            "bottom": 0,
          },
          "axis": {
            "strokeWidth": 0,
          },
          formatter: (params) => {
            const { yValue, highlighted } = params;
              if (highlighted) {
                return;
              }
              return { fill: yValue < 0 ? "red" : "blue" };
            }
        },
        }
        }
3 Likes
5

Hi @jinnyzor ,

That’s exactly what I was looking for. You’re a legend!

Thank you so much!
Adriana

2 Likes