Whether the card is clickable.
When true, the card will have hover effects and can be clicked.
Use the click event to handle clicks.
OptionalerrorError message to display in the content area.
When provided, the error message will be displayed instead of the slotted content.
The subtitle of the chart card, displayed below the title in the header when no header slot is provided.
The title of the chart card, displayed in the header when no header slot is provided.
StaticstylesInvoked when the component is added to the document's DOM.
In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('keydown', this._handleKeydown);
}
An element may be re-connected after being disconnected.
A flexible card component specifically designed for dashboard charts and visualizations.
Slot
header - The header content of the chart card. If not provided, title and subtitle props will be used.
Slot
Slot
footer - Footer content, typically containing action buttons or additional information.
Cssproperty
--chart-card-border-color - The color of the card border
Cssproperty
--chart-card-border-width - The width of the card border
Cssproperty
--chart-card-background - The background color of the card
Cssproperty
--chart-card-min-height - The minimum height of the card content area
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-10&m=dev
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-chart-card--docs