how to make a large figure in a Jupyter notebook cell, scrollable when it is output to html

Question

As you know, when you print a large table in a Jupyter Notebook cell, it is automatically made scrollable horizontally or vertically when it is too large whether the table is printed in the Notebook environment or is saved to an html file.

But for the figure, when it is too large it becomes scrollable as a large table but only when it is printed in a Notebook environment. When it is saved to an html file, the entire figure is fit into a smaller area and thus makes reading axis lables very difficult.

How can I do this?

For example, in Notebook if you click on the left and bottom border of a figure then you will get scroll bars at the right and bottom.

But the entire figure is stuffed into the "canvas" when it outputs to html file as shown below:

Answer 1

You have three options to modify the styling of your notebooks.

Inject CSS in a code cell

If you just want to modify the behavior of one single notebook, you can inject some CSS to customize your style in code.

from IPython.core.display import HTML
style = """
<style>
div.output_area {
    overflow-y: scroll;
}
div.output_area img {
    max-width: unset;
}
</style>
"""
HTML(style) 

To disable your modifications you just need to clear the output of that cell.

Custom stylesheet

If you want to modify your style on a global level you can put custom styling in a custom/custom.css file in your jupyter config dir (the file might not yet exist). To determine where the config folder is in your installation, run this

import jupyter_core;jupyter_core.paths.jupyter_config_dir()

This can not be toggled on the fly.

Custom nbconvert template

Lastly, if you just want to style the output of the HTML export take a look at the nbconvert documentation in the custom template section. This approach is probably the most powerful option to style your exports, but it just affects the exported version not your live notebook.