Card (chart)
Chart cards wrap data visualization components in a consistent card shell for use in dashboards and reporting views.
Demo
API
Tag
| Name |
<s-card-chart>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
aiassisted |
Boolean | When set, shows an AI icon at the leading edge of the title row. | |
navbutton |
String (URL) | When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row. | |
i18n |
string |
A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Slots
| Tag | Slot Name | Required | Value |
|---|---|---|---|
<span> or <div> |
title |
Card title displayed in the header row. | |
<span> or <div> |
description |
Brief description below the title row. | |
<aui-gauge>, <aui-donut>, <aui-barchart>, or <aui-line-chart> |
(default) | Data visualization content slotted into the card body. | |
<span> |
context |
Timeframe label shown at the bottom of the card, for example "Last 30 days". |
Demo
API
Tag
| Name |
<SCardChart>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
aiAssisted |
boolean | When true, shows an AI icon at the leading edge of the title row. | |
navButton |
string (URL) | When set to a URL, shows an anchor link styled as a navigation button at the trailing edge of the title row. | |
i18n |
object |
A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below. |
Slots
| Tag | Slot Name | Required | Value |
|---|---|---|---|
<span> or <div> |
title |
Card title displayed in the header row. | |
<span> or <div> |
description |
Brief description below the title row. | |
<AuiGauge>, <AuiDonut>, <AuiBarchart>, or <AuiLineChart> |
(default) | Data visualization content slotted into the card body. | |
<span> |
context |
Timeframe label shown at the bottom of the card, for example "Last 30 days". |
Skylab React links
i18n Strings
| ID | Description | Default value |
|---|---|---|
"cardChart.ariaLabel.navButton" |
The aria-label on the navigation button shown when navbutton is set. |
View details |
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com