# Pregão Gráfico de bolsa com velas verdes e vermelhas, volume embaixo, zoom pela roda do mouse e arraste para navegar. > Pregão é um componente exclusivo do THM Componentes que desenha um gráfico de bolsa em Canvas: candles de abertura, máxima, mínima e fechamento, volume embaixo, crosshair com legenda em reais, zoom pela roda ancorado no cursor e médias móveis de 9 e 21 períodos. Serve para fintechs, painéis de investimento e páginas que mostram séries de preço. - Categoria: Dados e visualização - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pregao/ ## 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 ```text 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. ## Componentes relacionados - [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo. - [Alambique](https://vibecode.thmtecnologia.com/componentes/alambique/): Tabela que resume vendas por região, produto e trimestre; arraste os campos para mudar o cruzamento. - [Balancete](https://vibecode.thmtecnologia.com/componentes/balancete/): Tabela que rola milhares de linhas sem travar, com filtros, ordenação, edição e copiar e colar com planilhas. - [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço. - [Algarismo](https://vibecode.thmtecnologia.com/componentes/algarismo/): Número que parte do zero e corre até o valor final quando aparece na tela, como um placar. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.