Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

250
Visualizações
Show HTML element in NextJS

I have an api that returns an html (figure converted in html) and I'd like to show this html in my nextjs page but I dont know how. This is my api code:

@router.get("/graph/{id_file}", name="Return the graph obtained")
async def create_graph(id_file: str):
        data = HAR.preparaDatos(id_file)
        dataFinal = HAR.dataYprediccion(data, 'routes/modelo.h5')
        fig = px.scatter(dataFinal, x=dataFinal['dateTimes'], y=dataFinal['nameActivities'])
        ht=fig.to_html()
        
        return HTMLResponse(ht)

And It returns this graph (in html): Graph

And this is my code in nextJS where I'm trying to show this graph:

<div className="grid">
            <p className="description">
              In this graph you can see the activity performed.
            </p>
            {isLoading && <p className="loading">Loading graph...</p>}
            <p className="graph">
                <script src={`http://127.0.0.1:8000/showGraph/graph/${id}`} />
            </p>

But I can't finally see the graph on my page, does anyone know what might be wrong?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You can use Reacts dangerouslySetInnerHTML to render HTML into an element. https://reactjs.org/docs/dom-elements.html

<div dangerouslySetInnerHTML={{__html: yourHTML}} />
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda