Gráficos

Spend breakdown chart

Consulte os gastos por serviço em um gráfico horizontal com escala comum e comparação de períodos.

Spend breakdown chart

Inspect service spending with an accessible horizontal bar chart and period comparison.

Spend period

USD per billing cycle

$624.00

$134.40

$84.00

Compute

Compute runs build and release workers. September spend increased by $94.00.

Como usar Spend breakdown chart

Consulte os gastos por serviço em um gráfico horizontal com escala comum e comparação de períodos.

Consulte os gastos por serviço em um gráfico horizontal com escala comum e comparação de períodos. No React controlado, passe value e onChange; onAction recebe a ação e o estado resultante. Use defaultValue para um rascunho local.

Selecione Storage para ler a explicação e mude para August para comparar os valores. Este exemplo atualiza apenas um rascunho local.

O exemplo contém três categorias fixas em uma escala comum de US$ 700. Substitua os valores ao adaptar o gráfico.

Propriedades: accent, status

Como o aplicativo recebe as alterações?

No React controlado, passe value e onChange; onAction recebe a ação e o estado resultante. Use defaultValue para um rascunho local.

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

1840Activity cell heatmapGráficosUma grade de calendário com pequenos quadrados coloridos que se estende em uma onda diagonal e permite que uma faixa de nível isole uma intensidade de cada vez.

2104Animated Time AxisGráficosUma linha de rótulos de data abaixo de um gráfico de linhas que seleciona automaticamente um subconjunto com espaçamento uniforme para evitar aglomeração e esmaece os rótulos perto do ponto pairado.

2097Animated Value AxisGráficosUma coluna de rótulos de valores ao lado de um gráfico que abrevia números grandes e desliza suavemente para novas posições sempre que o intervalo de dados do gráfico muda.

1525Area chart liteGráficosUm gráfico de área SVG responsivo com marcas de eixo redondo, um preenchimento gradiente, uma cruz que lê a amostra sob o ponteiro e uma limpeza de desenho.

2086Candle Price ChartGráficosUm gráfico de velas OHLC com velas coloridas para cima e para baixo, um pavio por período e uma dica de ferramenta flutuante mostrando abertura, alta, baixa e fechamento.

2287Category dot lineGráficosUma única curva suave em cinco categorias nomeadas, onde cada marcador de ponto é colorido a partir de uma rampa de acento girada por matiz, de modo que os marcadores funcionam como legenda.