ChartCard

ChartCard frames a chart primitive (Sparkline, BarChart, DonutChart, etc.) with a consistent header and body layout, so dashboards stay visually aligned without bespoke wrappers.

#Default usage

<ChartCard
  description="Last 7 days"
  title="Deployments"
>
  <BarChart
    data={[
      { value: 4 },
      { value: 8 },
      { value: 6 },
      { value: 12 },
      { value: 9 },
      { value: 14 },
      { value: 11 },
    ]}
    label="Deployments"
  />
</ChartCard>

#Import

import { ChartCard } from "@froggdesign/enter-ui-react";

#Accessibility

ChartCard renders a div with a header (title, description) and a body slot. Screen-reader names come from the chart primitive inside; ChartCard adds visual context only.

#API

• title, description: ReactNode header copy.
• actions: ReactNode rendered on the right of the header.
• Extends div props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.