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,
)
]
)
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,
),
]
)
if __name__ == "__main__":
app.run(debug=True)