Cartão de Gráfico Combo
Volume e taxa em uma tela - barras arredondadas no eixo esquerdo, uma linha no seu próprio eixo direito, cada uma com sua própria formatação. Virando uma categoria escurece sua barra, escurece o resto, lança um ponto pulsante na linha, e troca o título; as peças abaixo prendem o total da barra e a média da linha.
Sessions · Conversion 3.7%
83,200
+9.4%Instalação
Combo Chart Card faz parte da 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.
Dados
Ambas as séries leram a partir das mesmas linhas: barra e line cada nome um campo, um rótulo, uma cor opcional e a sua própria format - os eixos são independentes, por isso uma contagem e uma percentagem sentam- se juntos sem que um aplaine o outro. A pílula do período é uma gota quando passa ranges; sem dados, o cartão envia três períodos de demonstração.
// One row per category, carrying both series' fields.const data = [ { label: "Jan", sessions: 4200, rate: 2.4 }, { label: "Feb", sessions: 4800, rate: 2.6 }, // …];
<ComboChartCard title="Sessions" data={data} bar={{ key: "sessions", label: "Sessions", format: (n) => n.toLocaleString() }} line={{ key: "rate", label: "Conversion", color: "var(--color-chart-6)", format: (n) => `${n}%`, // the right axis keeps its own formatting }} delta={0.094} ranges={[ // period dropdown { id: "year", label: "This year", data: thisYear, delta: 0.094 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.028 }, ]} tiles // bar total + line average below the chart/>