# ChartSkeleton

> Loading placeholder with the rough shape of the chart that is coming.

Source: https://ui.jcsoftdev.com/docs/components/chart-skeleton

Loading placeholder with the rough shape of the chart that is coming.

## Import

```ts
import { ChartSkeleton } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
<ChartSkeleton height={220} label="Cargando ventas" shape="bars" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `height` * | `number` |  |  |
| `label` * | `string` |  |  |
| `shape` | `"line" \| "bars" \| "ring"` | `"bars"` | "bars" mimics columns, "line" a soft wave, "ring" a donut (for polar charts). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Bars](/storybook/?path=/story/charts-primitives-chartskeleton--bars)
- [Line](/storybook/?path=/story/charts-primitives-chartskeleton--line)
- [Ring](/storybook/?path=/story/charts-primitives-chartskeleton--ring)
- [Empty](/storybook/?path=/story/charts-primitives-chartskeleton--empty)

## Source

`packages/ui/src/charts/core/chart-states.tsx`