Como ele é
É o gráfico de velas das corretoras: cada dia útil vira uma vela, com corpo verde quando o preço subiu, vermelho quando caiu, e um pavio fino da mínima à máxima. Embaixo, barras translúcidas mostram o volume na mesma cor. Duas linhas acompanham o preço, uma índigo e outra ciano, e uma linha tracejada marca o último fechamento na escala de reais à direita. Ao mover o mouse, uma mira tracejada segue o cursor e a faixa de cima mostra abertura, máxima, mínima, fechamento, volume e variação. A roda aproxima o ponto sob o cursor, e arrastar desliza pelo histórico.
Você pode estar procurando isto se pediu algo assim
- gráfico de velas verde e vermelho igual ao de corretora
- mostrar o histórico de preço de uma ação no meu app de investimentos
- gráfico de bolsa com zoom e médias móveis
- candles com volume embaixo para a página do meu fundo
- gráfico de cotação que dá para arrastar e aproximar com o mouse
- tela de ativo de fintech com gráfico com cara profissional
Também chamado de
- gráfico de candles
- candlestick chart
- gráfico OHLC
- gráfico de velas
- gráfico de bolsa
- trading chart
Quando usar
- Telas de ativo em fintechs, corretoras e apps de investimento
- Painéis internos que acompanham preço de insumos, câmbio ou tarifas
- Páginas de produto que demonstram uma plataforma de análise financeira
- Conteúdo educativo sobre bolsa que precisa de um gráfico manipulável
Quando evitar
- Páginas para leigos, em que um gráfico de linha simples comunica com mais clareza
- Espaços pequenos no celular, onde o gráfico captura o arraste e atrapalha a rolagem da página
Como pedir para a sua IA
Crie um gráfico de candles OHLC em Canvas para a tela do ativo no meu app de investimentos, com volume, crosshair com legenda em reais, zoom pela roda ancorado no cursor e médias móveis SMA 9 e 21. Quero nitidez em telas de alta densidade, controle pelo teclado e carregamento só no cliente em Nuxt.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Candlestick
Dá para usar cotações reais no Candlestick?
Na versão do catálogo, o Candlestick gera candles fictícios por passeio aleatório com semente, ajustáveis por seed, count, startPrice e endDate, e não tem uma prop de dados. Para cotações reais, peça à IA para trocar o gerador por uma prop com seus candles de abertura, máxima, mínima, fechamento e volume.
O Candlestick funciona no celular?
Funciona no navegador do celular: arrastar com o dedo desliza pelo histórico e move a mira. O zoom do Candlestick é pela roda do mouse ou pelas teclas mais e menos, sem gesto de pinça. Como o gráfico captura o arraste, deixe espaço fora dele para a pessoa conseguir rolar a página.
O Candlestick funciona em Nuxt com SSR?
Funciona no cliente, porque o Candlestick desenha em Canvas. O prompt do THM Componentes orienta a IA a colocar o componente dentro de ClientOnly com um fallback estático, como imagem ou cor, e a carregar sob demanda. O desenho só acontece quando algo muda e é pulado enquanto o gráfico está fora da tela.
