59 / 59 · Generative
Support tickets
A stacked three-series bar chart with axis ticks and a legend.
100
75
50
25
0
W1
W2
W3
W4
EmailChatPhone
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": "Support tickets by channel",
"children": [
{
"$type": "Chart",
"$key": "chart",
"variant": "bar",
"stacked": true,
"showAxis": true,
"showLegend": true,
"series": [
{
"label": "Email",
"data": [
{
"label": "W1",
"value": 42
},
{
"label": "W2",
"value": 38
},
{
"label": "W3",
"value": 51
},
{
"label": "W4",
"value": 35
}
]
},
{
"label": "Chat",
"data": [
{
"label": "W1",
"value": 28
},
{
"label": "W2",
"value": 33
},
{
"label": "W3",
"value": 25
},
{
"label": "W4",
"value": 40
}
]
},
{
"label": "Phone",
"data": [
{
"label": "W1",
"value": 12
},
{
"label": "W2",
"value": 9
},
{
"label": "W3",
"value": 15
},
{
"label": "W4",
"value": 11
}
]
}
]
}
]
}