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 Pregão
Dá para usar cotações reais em Pregão?
Na versão do catálogo, Pregão 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.
Pregão funciona no celular?
Funciona no navegador do celular: arrastar com o dedo desliza pelo histórico e move a mira. O zoom de Pregão é 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.
Pregão funciona em Nuxt com SSR?
Funciona no cliente, porque Pregão 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.
