

.. _sphx_glr_gallery_user_interfaces:

.. _user_interfaces:

Embedding Matplotlib in graphical user interfaces
=================================================

You can embed Matplotlib directly into a user interface application by
following the embedding_in_SOMEGUI.py examples here. Currently
Matplotlib supports PyQt/PySide, PyGObject, Tkinter, and wxPython.

When embedding Matplotlib in a GUI, you must use the Matplotlib API
directly rather than the pylab/pyplot procedural interface, so take a
look at the examples/api directory for some example code working with
the API.



.. raw:: html

    <div class="sphx-glr-thumbnails">

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use the agg backend directly to create images, which may be of use to web application developers who want full control over their code without using the pyplot interface to manage figures, figure closing etc.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_canvasagg_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_canvasagg.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">CanvasAgg demo</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate NavigationToolbar with GTK3 accessed via pygobject.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_gtk3_panzoom_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_gtk3_panzoom_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in GTK3 with a navigation toolbar</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate adding a FigureCanvasGTK3Agg widget to a Gtk.ScrolledWindow using GTK3 accessed via pygobject.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_gtk3_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_gtk3_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in GTK3</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate NavigationToolbar with GTK4 accessed via pygobject.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_gtk4_panzoom_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_gtk4_panzoom_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in GTK4 with a navigation toolbar</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate adding a FigureCanvasGTK4Agg widget to a Gtk.ScrolledWindow using GTK4 accessed via pygobject.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_gtk4_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_gtk4_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in GTK4</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Simple Qt application embedding Matplotlib canvases.  This program will work equally well using any Qt binding (PyQt6, PySide6, PyQt5, PySide2).  The binding can be selected by setting the QT_API environment variable to the binding name, or by first importing it.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_qt_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_qt_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in Qt</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Embed in Tk">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_tk_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_tk_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in Tk</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example of how to use wxagg in an application with the new toolbar - comment out the add_toolbar line for no toolbar.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_wx2_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_wx2_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in wx #2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Copyright (C) 2003-2004 Andrew Straw, Jeremy O&#x27;Donoghue and others">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_wx3_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_wx3_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in wx #3</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example of how to use wxagg in a wx application with a custom toolbar.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_wx4_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_wx4_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in wx #4</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Embed in wx #5">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_in_wx5_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_in_wx5_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in wx #5</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to embed Matplotlib WebAgg interactive plotting in your own web application and framework.  It is not necessary to do all this if you merely want to display a plot in a browser or use Matplotlib&#x27;s built-in Tornado-based server &quot;on the side&quot;.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_embedding_webagg_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_embedding_webagg_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embedding WebAgg</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Fourier Demo WX">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_fourier_demo_wx_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_fourier_demo_wx_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Fourier Demo WX</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example of embedding Matplotlib in an application and interacting with a treeview to store data.  Double-click on an entry to update plot data.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_gtk3_spreadsheet_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_gtk3_spreadsheet_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GTK3 spreadsheet</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example of embedding Matplotlib in an application and interacting with a treeview to store data.  Double-click on an entry to update plot data.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_gtk4_spreadsheet_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_gtk4_spreadsheet_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GTK4 spreadsheet</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates how to convert (math)text to a wx.Bitmap for display in various controls on wxPython.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_mathtext_wx_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_mathtext_wx_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Display mathtext in WX</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Matplotlib with Glade 3">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_mpl_with_glade3_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_mpl_with_glade3_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Matplotlib with Glade 3</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="To use this hook, ensure that this module is in your PYTHONPATH, and set rcParams[&quot;figure.hooks&quot;] = [&quot;mplcvd:setup&quot;].  This hook depends on the colorspacious third-party module.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_mplcvd_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_mplcvd.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">mplcvd -- an example of figure hook</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example of how to use pyplot to manage your figure windows, but modify the GUI by accessing the underlying GTK widgets.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_pylab_with_gtk3_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_pylab_with_gtk3_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">pyplot with GTK3</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example of how to use pyplot to manage your figure windows, but modify the GUI by accessing the underlying GTK widgets.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_pylab_with_gtk4_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_pylab_with_gtk4_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">pyplot with GTK4</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate how to create an interactive histogram, in which bars are hidden or shown by clicking on legend markers.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_svg_histogram_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_svg_histogram_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">SVG Histogram</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to create a tooltip that will show up when hovering over a matplotlib patch.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_svg_tooltip_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_svg_tooltip_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">SVG Tooltip</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_toolmanager_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_toolmanager_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Tool Manager</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="When using Matplotlib in a web server it is strongly recommended to not use pyplot (pyplot maintains references to the opened figures to make show work, but this will cause memory leaks unless the figures are properly closed).">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_web_application_server_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_web_application_server_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Embed in a web application server (Flask)</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example to draw a cursor and report the data coords in wx.">

.. only:: html

  .. image:: /gallery/user_interfaces/images/thumb/sphx_glr_wxcursor_demo_sgskip_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_user_interfaces_wxcursor_demo_sgskip.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Add a cursor in WX</div>
    </div>


.. thumbnail-parent-div-close

.. raw:: html

    </div>


.. toctree::
   :hidden:

   /gallery/user_interfaces/canvasagg
   /gallery/user_interfaces/embedding_in_gtk3_panzoom_sgskip
   /gallery/user_interfaces/embedding_in_gtk3_sgskip
   /gallery/user_interfaces/embedding_in_gtk4_panzoom_sgskip
   /gallery/user_interfaces/embedding_in_gtk4_sgskip
   /gallery/user_interfaces/embedding_in_qt_sgskip
   /gallery/user_interfaces/embedding_in_tk_sgskip
   /gallery/user_interfaces/embedding_in_wx2_sgskip
   /gallery/user_interfaces/embedding_in_wx3_sgskip
   /gallery/user_interfaces/embedding_in_wx4_sgskip
   /gallery/user_interfaces/embedding_in_wx5_sgskip
   /gallery/user_interfaces/embedding_webagg_sgskip
   /gallery/user_interfaces/fourier_demo_wx_sgskip
   /gallery/user_interfaces/gtk3_spreadsheet_sgskip
   /gallery/user_interfaces/gtk4_spreadsheet_sgskip
   /gallery/user_interfaces/mathtext_wx_sgskip
   /gallery/user_interfaces/mpl_with_glade3_sgskip
   /gallery/user_interfaces/mplcvd
   /gallery/user_interfaces/pylab_with_gtk3_sgskip
   /gallery/user_interfaces/pylab_with_gtk4_sgskip
   /gallery/user_interfaces/svg_histogram_sgskip
   /gallery/user_interfaces/svg_tooltip_sgskip
   /gallery/user_interfaces/toolmanager_sgskip
   /gallery/user_interfaces/web_application_server_sgskip
   /gallery/user_interfaces/wxcursor_demo_sgskip

