Sparklines

Sparklines is an AG Grid Enterprise feature, so you’ll need a license key to use it. See Using AG Grid Enterprise for an example of how to use your license key with Dash AG Grid components.

Sparklines are mini charts that you can add to grid cells. To add sparklines to a column’s cells, add "cellRenderer": "agSparklineCellRenderer" to the column in the columnDefs.

from dash import Dash, html
import dash_ag_grid as dag

import json
import os

app = Dash(__name__)

with open("dash_docs/assets/example-data/data.json") as json_file:
    data = json.load(json_file)

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

app.layout = html.Div(
    [
        dag.AgGrid(
            id="sparklines-basic-example",
            enableEnterpriseModules=True,
            licenseKey = os.environ['AGGRID_ENTERPRISE'],
            columnDefs=columnDefs,
            rowData=data,
            dashGridOptions={"animateRows": False}
        )
    ]
)


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

Customizing Sparklines

Sparklines can be customized by supplying sparklineOptions to cellRendererParams on the agSparklineCellRenderer. Here we customize different styles of the sparklines, including the shape, and size, and add crosshairs.

For more detail on sparklines and customization options see Sparklines Overview in the official AG Grid docs.

from dash import Dash, html
import dash_ag_grid as dag

import json
import os

app = Dash(__name__)

with open("dash_docs/assets/example-data/data.json") as json_file:
    data = json.load(json_file)

columnDefs = [
    {"field": "symbol", "maxWidth": 120},
    {"field": "name", "minWidth": 250},
    {
        "field": "change",
        "cellRenderer": "agSparklineCellRenderer",
        "cellRendererParams": {
            "sparklineOptions": {
                "type": "area",
                "marker": {
                    "size": 2,
                    "shape": "circle",
                    "fill": "blue",
                    "stroke": "blue",
                    "strokeWidth": 2,
                },
                "fill": "rgba(216, 204, 235, 0.3)",
                "line": {
                    "stroke": "rgb(119,77,185)",
                },
                "highlightStyle": {
                    "fill": "rgb(143,185,77)",
                },
                "axis": {
                    "stroke": "rgb(204, 204, 235)",
                },
                "crosshairs": {
                    "xLine": {
                        "enabled": "true",
                        "lineDash": "dash",
                        "stroke": "rgba(0, 0, 0, 0.5)",
                    },
                    "yLine": {
                        "enabled": "true",
                        "lineDash": "dash",
                        "stroke": "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        },
    },
    {
        "field": "volume",
        "type": "numericColumn",
        "maxWidth": 140,
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="sparklines-2-example",
            enableEnterpriseModules=True,
            licenseKey = os.environ['AGGRID_ENTERPRISE'],
            columnDefs=columnDefs,
            rowData=data,
            dashGridOptions={"animateRows": False}
        ),
    ]
)


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