52 / 59 · Generative
Weekly active users
A stacked two-series area chart with axis ticks and a legend.
2,000
1,500
1,000
500
0
Mon
Tue
Wed
Thu
Fri
Sat
Sun
New usersReturning users
Installation
npm install @assistant-ui/react-generative-ui
Usage
import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";
<div data-aui-theme="elements">
{renderGenerativeUI(spec, library, { status: "done" })}
</div>Spec
Data{
"$type": "Card",
"title": "Weekly active users",
"children": [
{
"$type": "Chart",
"$key": "chart",
"variant": "area",
"stacked": true,
"showAxis": true,
"showLegend": true,
"series": [
{
"label": "New users",
"data": [
{
"label": "Mon",
"value": 320
},
{
"label": "Tue",
"value": 410
},
{
"label": "Wed",
"value": 380
},
{
"label": "Thu",
"value": 460
},
{
"label": "Fri",
"value": 520
},
{
"label": "Sat",
"value": 300
},
{
"label": "Sun",
"value": 260
}
]
},
{
"label": "Returning users",
"data": [
{
"label": "Mon",
"value": 890
},
{
"label": "Tue",
"value": 910
},
{
"label": "Wed",
"value": 940
},
{
"label": "Thu",
"value": 980
},
{
"label": "Fri",
"value": 1020
},
{
"label": "Sat",
"value": 760
},
{
"label": "Sun",
"value": 700
}
]
}
]
}
]
}