Output a centred HTML image with mpld3

Question

I am using the mpld3 Python package to save out static matplotlib figures as interactive images in the html format. A quick example is the following:

# draw a static matplotlib figure
import matplotlib.pyplot as plt
import numpy as np

fig = plt.figure()
ax = plt.axes()
x = np.linspace(0, 10, 1000)
ax.plot(x, np.sin(x))

# save as an interactive html file
import mpld3

html_str = mpld3.fig_to_html(fig)
Html_file= open("sample.html","w")
Html_file.write(html_str)
Html_file.close()

But the problem is that when opening the html image in a browser, it is always on the top-left. Is there a way to make it center or even have more control of the output style?

@BijayRegmi Thanks, I saw some posts which mentioned css, but I have no background in that. I use Python almost only for research computing. So I can not come up with a css solution. — Jeremy, Mar 31 '21 at 23:41
then just post a sample of how 'sample.html' looks and change the tag to HTML and CSS — Bijay Regmi, Apr 01 '21 at 00:08

score 1 · Accepted Answer · answered Apr 01 '21 at 03:10

mpld3.fig_to_html() just generates a piece of fragment of html. Though the fragment alone can work as an html document, it is supposed to be embedded into a full html document.

Below is an example of the solution specifying id fig1 to the generated fragment using figid option. Preparing html document with CSS style definition for <div> having id fig1. And embed the fragment into the document.

html_fragment = mpld3.fig_to_html(fig, figid = 'fig1')

html_doc = f'''
<style type="text/css">
div#fig1 {{ text-align: center }}
</style>

{html_fragment}
'''

Html_file= open("sample.html","w")
Html_file.write(html_doc)
Html_file.close()

Output a centred HTML image with mpld3

1 Answers1