[FIXED] How to plot graphs in QScrollArea without shrinking them?

Issue

I'm creating an interface where I want to plot graphs in another tab by clicking in a button. I want the graphs to be plotted side-by-side in a scroll area. The problem is that when I plot the graphs, instead of the Scroll Bar working on the visualization, the graphs actually shrink to fit the widget

Here's a minimal reproducible example

import sys
from PyQt5.QtWidgets import (QApplication, QMainWindow, QWidget, QPushButton,
                             QLabel, QVBoxLayout, QHBoxLayout, QMessageBox, 
                             QLineEdit,QComboBox, QAction, QTabWidget, QScrollArea)

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar

from matplotlib.figure import Figure
import matplotlib.pyplot as plt
                             
from PyQt5.QtCore import Qt
from PyQt5 import QtGui

class MainWindow(QMainWindow):    

    #view (GUI)
    def __init__(self, parent = None):
        #initalizer
        super(MainWindow, self).__init__(parent)
        
        #Window
        self.setWindowTitle("DataVisualizationPrototype")
        self.setGeometry(400, 200, 900, 800)
        self.activateWindow()
        self.raise_()
        
        
        self.tab_widget = TabWidget(self)
        self.setCentralWidget(self.tab_widget)
        
class TabWidget(QWidget):
    
    def __init__(self, parent):
        super(QWidget, self).__init__(parent)
        self.layout =QVBoxLayout(self)
        
        self.tabs = QTabWidget()
        self.tab1 = QWidget()
        self.tab2 = QWidget()
        self.tabs.addTab(self.tab1, "Home")
        self.tabs.addTab(self.tab2, "Comparison")
        self.layout.addWidget(self.tabs)
        self.setLayout(self.layout)
        
        
        #HOME PAGE
        #==========================================
        #GeneralLayout
        self.tab1layout = QVBoxLayout()
        self.tab1.setLayout(self.tab1layout)
        self.tab1layout.sizeHint()
        
        plotButton = QPushButton()
        self.tab1layout.addWidget(plotButton)
        plotbutton.clicked.connect(onclick2)

       
      
        #COMPARISON TAB
        #==========================================
        #GeneralLayout
        self.tab2layout = QVBoxLayout()
        self.tab2.setLayout(self.tab2layout)
        self.tab2layout.sizeHint()
        
        self.compGraphLayout = QHBoxLayout()
        self.compGraphLayout.addStretch()
        
        self.compScroll = QScrollArea()
        self.compScroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        self.compScroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.scrollWidget = QWidget()
        
        self.compScroll.setWidget(self.scrollWidget)
        self.compScroll.setWidgetResizable(True)
        
        self.tab2layout.addWidget(self.compScroll)
        self.scrollWidget.setLayout(self.compGraphLayout)
        
   def onclick2(self, event):
        self.plotLayout = QVBoxLayout()
        self.fig = plt.figure()
        self.plotLayout.addWidget(FigureCanvas(self.fig))
        
   
   
   
        self.plotLayout.addWidget(NavigationToolbar
                                 (FigureCanvas(self.fig),
                                  self.scrollWidget))
        self.compGraphLayout.addLayout(self.plotLayout)
        

#Plot MRE
        self.fig.plt.plot([1, 2, 3, 4])
        self.fig.plt.ylabel('some numbers')
        
        FigureCanvas(self.fig).adjustSize()
        
        
 
        
def main():

    pt1 = QApplication(sys.argv)
    view = MainWindow()
    view.show()
    
    sys.exit(pt1.exec())

if __name__ == '__main__':
    main()

Solution

The code provided by the OP is messy, redundant and has some typos so I will avoid pointing out the cause of the error.

My solution propose a simple and clear way to achieve the goal of displaying the plots horizontally. On the other hand, the canvas does not have a suitable sizeHint, so the widgets will be compressed making the scrollbar not visible, so a possible option is to set a minimum width.

import sys

from PyQt5.QtWidgets import (
    QApplication,
    QMainWindow,
    QWidget,
    QPushButton,
    QVBoxLayout,
    QHBoxLayout,
    QTabWidget,
    QScrollArea,
)

from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar

from matplotlib.figure import Figure


class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)

        # Window
        self.setWindowTitle("DataVisualizationPrototype")
        self.setGeometry(400, 200, 900, 800)
        self.activateWindow()
        self.raise_()

        self.tab_widget = TabWidget()
        self.setCentralWidget(self.tab_widget)


class TabWidget(QTabWidget):
    def __init__(self, parent=None):
        super(TabWidget, self).__init__(parent)

        self.tab1 = QWidget()
        self.plot_button = QPushButton("Add plot")
        lay = QVBoxLayout(self.tab1)
        lay.addWidget(self.plot_button)

        self.tab2 = QWidget()
        self.scroll_area = QScrollArea()
        self.scroll_container = QWidget()
        self.scroll_area.setWidgetResizable(True)
        self.scroll_area.setWidget(self.scroll_container)
        self.scroll_layout = QHBoxLayout(self.scroll_container)
        lay = QVBoxLayout(self.tab2)
        lay.addWidget(self.scroll_area)

        self.addTab(self.tab1, "Home")
        self.addTab(self.tab2, "Comparison")

        self.plot_button.clicked.connect(self.plot)

    def plot(self):
        canvas = FigureCanvas(Figure())
        ax = canvas.figure.add_subplot(111)
        toolbar = NavigationToolbar(canvas, self)

        container = QWidget()
        lay = QVBoxLayout(container)
        lay.addWidget(canvas)
        lay.addWidget(toolbar)

        self.scroll_layout.addWidget(container)
        container.setMinimumWidth(400)

        ax.plot([1, 2, 3, 4])
        ax.set_ylabel("some numbers")


def main():

    app = QApplication(sys.argv)
    view = MainWindow()
    view.show()

    sys.exit(app.exec())


if __name__ == "__main__":
    main()

Answered By - eyllanesc