Cartão de Gráfico de Áreas
Composição ao longo do tempo - várias séries como áreas empilhadas com preenchimentos de gradiente suaves, um cursor tracejado e um título de contagem que muda para o total da categoria pairada. Um botão alterna entre empilhados, sobrepostos e 100% de visualizações; outro troca o monotone spline para segmentos retos.
Visitantes
94,700
+8.2%Instalação
A placa do gráfico da área faz parte do BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Variantes
empilhado (padrão) lê-se como volume, overlap compara séries umas com as outras, e percent normaliza cada categoria para 100% para que o gráfico leia como compartilhamento. forma Escolhe a curva.
{/* Overlapping translucent areas - comparison rather than composition */}<AreaChartCard variant="overlap" />
{/* 100% stacked: every category fills the height, so it reads as share */}<AreaChartCard variant="percent" />
{/* Straight segments instead of the monotone spline */}<AreaChartCard shape="sharp" />Dados
data é uma lista plana de linhas chaveadas por label com um campo numérico por série; series nomeia esses campos e, opcionalmente, as suas cores. Os totais, a legenda, as peças e todos os estados hover são derivados. ranges; sem dados, o cartão envia três períodos de demonstração, que é o que as prévias acima usam.
// One row per category, one numeric field per series.const data = [ { label: "Jan", organic: 2400, referral: 1200, paid: 800 }, { label: "Feb", organic: 2800, referral: 1400, paid: 700 }, // …];
<AreaChartCard title="Visitors" data={data} series={[ { key: "organic", label: "Organic" }, // palette colour { key: "referral", label: "Referral" }, { key: "paid", label: "Paid", color: "var(--color-chart-3)" }, // or your own ]} headline={64820} // optional resting headline (defaults to the grand total) delta={0.082} // "+8.2%" chip range="This year" // static pill… tiles // stat tile per series under the chart/>
// …or a working period dropdown: each range overrides data / delta / headline.<AreaChartCard ranges={[ { id: "year", label: "This year", data: thisYear, delta: 0.082 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.036 }, ]}/>