Rejilla de actividad de 52 semanas que se llena día por día con una escala de color; el cursor muestra la fecha y la cifra de cada día.
Datos
Datos
Pro
Minigráfica
Línea de tendencia que se dibuja con un punto que la encabeza, área suave y un punto vivo que late al final; el cursor muestra el valor de cada punto y un doble clic la dibuja de nuevo.
- Plan
- Pro · licencia comercial
- Dependencias
- Solo React
- Props
- 11 (9 ajustables)
Visitas semanales
65349.8 %
Instalación
1. Configura el registro Pro una sola vez
Los componentes Pro no están en npm ni en el registro público de shadcn: se instalan con tu licencia desde el registro privado de Furin.
Usar mi licencia2. Instala Minigráfica
npx shadcn@latest add @furin-pro/sparklineProps
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| data | number[] | "serie de ejemplo" | Valores de la serie (si no pasas ninguno se usa una serie de ejemplo). |
| labels | string[] | "Sem 1, Sem 2…" | Etiqueta de cada valor para el cursor (una por valor). |
| title | string | "Visitas semanales" | Título sobre la gráfica. |
| color | string | "#5eead4" | Color de la línea y del punto vivo. |
| height | number | 150 | Alto de la gráfica, en px. |
| strokeWidth | number | 2.5 | Grosor de la línea, en px. |
| prefix | string | "" | Texto antes del valor (por ejemplo "$"). |
| suffix | string | "" | Texto después del valor (por ejemplo "%"). |
| showHeader | boolean | true | Muestra el valor y la variación arriba de la gráfica. |
| duration | number | 1.8 | Segundos que tarda en dibujarse la línea. |
| replayEvery | number | 0 | Segundos entre redibujados de la línea (0 la deja quieta). |
Sigue explorando
Anillo de progreso con degradado, punta luminosa que lo encabeza y un número que cuenta; con un clic se llena de nuevo.
Datos