Markup vs markup_card

can i load a result of a matplotlib image into a markup or only is available on a markup_card?

Hi @rmfjd78,

It is possible. It is basically the same component, the only difference is that markup is used in forms whereas markup_card is a separate card.

from h2o_wave import site, ui
import io
import base64
import numpy as np
import matplotlib.pyplot as plt


n = 25
plt.figure(figsize=(3, 3))
    np.random.rand(n), np.random.rand(n),
    s=(30 * np.random.rand(n)) ** 2,

buf = io.BytesIO()
plt.savefig(buf, format='png')
image = base64.b64encode('utf-8')

page = site['/demo']
page['example'] = ui.form_card(
    box='1 1 3 5',
    title='In form card',
        ui.markup(f'<img src="data:image/png;base64, {image}" alt="matplotlib image in markup card"/>')

Further reading: How to display Base64 images in HTML? - Stack Overflow

You can run this wave script simply with:


and see at http://localhost:10101/demo

Further reading: Wave Scripts | H2O Wave