Charts ChartCard

Expandable card component for visually wrapping multiple charts.

Installation

PNPM

pnpm add @lg-charts/legend

Yarn

yarn add @lg-charts/legend

NPM

npm install @lg-charts/legend

Example

import { ChartCard } from '@lg-charts/chart-card';
import { Chart } from '@lg-charts/core';

<ChartCard title="My Group of Charts">
  <Chart />
  <Chart />
<ChartCard>;

Properties

| Name | Description | Type | Default | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | | title | The title to display in the chart header. | React.ReactNode | | | defaultOpen (optional) | Defines the default state of the card. | boolean | true | | isOpen (optional) | Forces the card state. | boolean | | | onToggleButtonClick (optional) | Callback fired when a user clicks the open/close toggle button. | (event: MouseEventHandler<HTMLButtonElement>) => void | | | headerContent (optional) | Content that will be rendered to the right of the title. Useful for adding components such as IconButton's that control functionality in the chart. | React.ReactNode | |