ChartCard

Card shell for a chart with a title, a subtitle and an optional overflow menu.

Jump to API reference

Import

Vue
import { UiChartCard } from '@ziyarago/ui/vue'

With chart

Weekly bookings

Last 12 weeks
Chart goes here
Vue
<UiChartCard
  title="Weekly bookings"
  subtitle="Last 12 weeks"
  :menu="['Export', 'Share', 'Delete']"
>
  Chart goes here
</UiChartCard>

API reference

Card shell for a chart with title, subtitle and an optional overflow menu; put the chart in the default slot.

Props

PropType and valuesDefaultDescription
titlerequiredstring—Card title.
subtitlestring—Muted line under the title.
menustring[]—Labels of overflow menu items shown behind a three-dot button. An item named "Delete" is styled as danger.
sizexssmmdlgxl'md'Padding, gap and title size.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultChart or any content shown below the header.

Events

Vue: @name. React: onName.

menuCalled with the clicked menu item label (the string from menu); the menu closes afterwards.