Carregando…Carregando…Carregando…Carregando…Super gráfico: uma entrada que despacha por `type` para line/area/bar/donut/radar/funnel/sparkline.
$ npx kikitocn add chartimport { Chart } from "@/components/ui/cn/chart/Chart";
export function ChartExample() {
return (
<Chart />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
type | 'line' | 'area' | 'bar' | 'donut' | 'radar' | 'funnel' | 'sparkline' | 'line' | Tipo do gráfico; despacha para o renderer correspondente. As demais props variam conforme o tipo |
series | LineChartSeries[] | AreaChartSeries[] | RadarSeries[] | undefined | Séries de dados (tipos line, area e radar) |
data | number[] | AreaChartDataPoint[] | BarChartItem[] | undefined | Dados: pontos por área, itens { label, value, color? } (bar) ou números (sparkline) |
segments | DonutSegment[] | undefined | type='donut': segmentos { label, value, color? } |
stages | FunnelStage[] | undefined | type='funnel': estágios { label, value, color? } |
axes | RadarAxis[] | undefined | type='radar': eixos { label, max? } |
labels | string[] | undefined | type='line': rótulos do eixo X |
sparklineType | 'line' | 'bar' | 'area' | 'line' | type='sparkline': subtipo do mini-gráfico |
height | number | undefined | Altura do gráfico em px (line, area, bar, funnel, sparkline) |
showLegend | boolean | undefined | Exibe a legenda (line, area, donut, radar) |
Chart — type="line" · selecione a variante acima
Line Chart — multi-series with area fill and legend
Area Chart — gradient fills with hover tooltip
Bar Chart — animated SVG bars with per-bar colors
Donut Chart — segments with legend and center value
Radar Chart — multi-series spider chart
Funnel Chart — conversion funnel with rates
Area
Line
Bar