Carregando…Carregando…Carregando…Carregando…ECharts multi-series area chart with stacked mode, gradient, tooltip, grid, legend and step interpolation.
$ npx kikitocn add area-chart@/lib/utils@/lib/echartsimport { AreaChart } from "@/components/ui/cn/area-chart/AreaChart";
export function AreaChartExample() {
return (
<AreaChart step="start" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
data* | AreaChartDataPoint[] | — | Array de pontos: { label, [seriesKey]: number } |
series* | AreaChartSeries[] | — | Séries: { key, label?, color? } |
height | number | 200 | Altura em px |
showGrid | boolean | true | Exibe linhas de grade |
showLegend | boolean | true | Exibe legenda das séries |
showTooltip | boolean | true | Exibe tooltip ao passar o mouse |
stacked | boolean | false | Empilha as séries |
gradient | boolean | true | Aplica gradiente vertical nas áreas |
step | 'start' | 'middle' | 'end' | undefined | Interpolação em degrau em vez de reta entre pontos |
Area Chart — gradient fills with hover tooltip
prop step="start" — degrau nativo do ECharts em vez de reta entre pontos