# Sismógrafo Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo. > Sismógrafo é um componente exclusivo do THM Componentes para monitoramento em tempo real: um gráfico de linha e área em SVG que, por padrão, ganha um ponto novo a cada 1,5 segundo, desliza o eixo com suavidade e mostra crosshair com tooltip em pt-BR. Aceita até duas séries e uma função feed para ligar dados reais. - Categoria: Dados e visualização - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/sismografo/ ## Como ele é Parece o monitor de uma sala de operações. Duas curvas, uma índigo e outra ciano, correm sobre uma grade clara, com um degradê suave por baixo. Ao entrar na tela, as linhas se desenham da esquerda para a direita. A cada 1,5 segundo chega um ponto novo: o gráfico desliza para a esquerda, a escala se ajusta suavemente e um halo pulsa no ponto mais recente. Ao lado do título, um selo Ao vivo tem um ponto pulsante; a legenda mostra o valor atual de cada série. Com o mouse ou o dedo, uma linha vertical marca o instante e um cartão branco mostra horário e valores. ## Você pode estar procurando isto se pediu algo assim - “gráfico que vai se atualizando sozinho em tempo real” - “mostrar quantos usuários estão conectados agora no painel” - “linha que anda para o lado conforme chegam dados novos” - “gráfico de monitoramento igual tela de sala de operações” - “gráfico de área bonito com curva suave para o meu dashboard” - “acompanhar os acessos do site minuto a minuto” ## Também chamado de gráfico em tempo real, real-time chart, streaming chart, gráfico de área, live line chart, gráfico de monitoramento ## Quando usar - Painel de monitoramento de plataformas, servidores ou filas - Central de atendimento que acompanha chamados ou conversas em andamento - Página de status ou de métricas públicas com acessos em tempo real - Gráfico estático de séries diárias ou mensais, com o modo ao vivo desligado ## Quando evitar - Mais de duas séries no mesmo gráfico, já que o componente desenha no máximo duas - Páginas de leitura em que dados se mexendo o tempo todo tiram a atenção do texto ## Como pedir para a sua IA ```text Crie um gráfico de área ao vivo em SVG para o painel de monitoramento, com curva monotônica, um ponto novo a cada poucos segundos vindo da minha API e eixo que desliza com suavidade. Quero crosshair com tooltip em pt-BR, pausa fora da tela e uma versão sem animação para movimento reduzido. ``` 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 Sismógrafo ### Como ligo dados reais a Sismógrafo? Passe na prop feed uma função que recebe os últimos valores e devolve os novos, inclusive de forma assíncrona; Sismógrafo chama essa função a cada intervalo. Também dá para empurrar pontos pelo método push, via ref, ou desligar o modo ao vivo e passar séries com valores e datas. ### Sismógrafo pesa no navegador? Pouco. Sismógrafo usa SVG sem dependências, tem peso Leve no THM Componentes e só anima enquanto há algo mudando. Fora da tela, o componente para de pedir pontos novos e de redesenhar, e volta quando a pessoa rola até lá de novo. ### Sismógrafo respeita quem prefere menos movimento? Respeita. Com a preferência de reduzir movimento, Sismógrafo mostra o gráfico já desenhado, os pontos novos entram sem o deslizamento do eixo, a escala muda sem transição, o ponto do selo para de pulsar e o halo do último ponto some. Os dados continuam atualizando normalmente. ## Componentes relacionados - [Pregão](https://vibecode.thmtecnologia.com/componentes/pregao/): Gráfico de bolsa com velas verdes e vermelhas, volume embaixo, zoom pela roda do mouse e arraste para navegar. - [Manômetro](https://vibecode.thmtecnologia.com/componentes/manometro/): Medidores em arco com faixas verde, âmbar e vermelha, ponteiro que balança até parar e número contando. - [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. - [Páreo](https://vibecode.thmtecnologia.com/componentes/pareo/): Barras horizontais que avançam período a período e trocam de lugar no ranking enquanto o tempo passa. - [Caderneta](https://vibecode.thmtecnologia.com/componentes/caderneta/): Um ano inteiro em quadradinhos, um por dia, que ficam mais escuros nos dias com mais atividade. --- 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.