PyQt QProgressBar vertical text alignment issue

Question

I am trying to change color in vertically aligned QProgressBar

I found example of how to change color by setStyleSheet here: Changing the color of a QProgressbar()

But there is not mentioned vertical alignment. Please check screenshot of my example:

First progress bar is default, second and third is with changed color. but text is not properly aligned (I need it as on first default bar).

I also tried setTextDirection(QtGui.QProgressBar.TopToBottom) but it didn't help.

Please advise

Code to try it out:

import sys
from PyQt4 import QtGui, QtCore

class Window(QtGui.QMainWindow):

    def __init__(self):
        super(Window, self).__init__()
        self.setGeometry(50, 50, 500, 300)

        progress1 = QtGui.QProgressBar(self)
        progress1.setGeometry(50, 50, 25, 150)
        progress1.setOrientation(QtCore.Qt.Vertical)
        progress1.setMaximum(0)
        progress1.setMaximum(10)
        progress1.setValue(4)
        progress1.setFormat("myServer008-Load")

        progress2 = QtGui.QProgressBar(self)
        progress2.setGeometry(100, 50, 25, 150)
        # adding style will stop rotating text 90 degrees clockwise
        progress2.setStyleSheet("QProgressBar::chunk { background-color: red; }")
        progress2.setOrientation(QtCore.Qt.Vertical)
        progress2.setMaximum(0)
        progress2.setMaximum(10)
        progress2.setValue(4)
        progress2.setFormat("myServer008-Load")

        progress3 = QtGui.QProgressBar(self)
        progress3.setGeometry(150, 50, 25, 150)
        # centring text works, but still do no rotate it
        progress3.setStyleSheet("QProgressBar { text-align: center; } QProgressBar::chunk { background-color: red; }")
        progress3.setOrientation(QtCore.Qt.Vertical)
        progress3.setMaximum(0)
        progress3.setMaximum(10)
        progress3.setValue(4)
        progress3.setFormat("myServer008-Load")


app = QtGui.QApplication(sys.argv)
GUI = Window()
GUI.show()
sys.exit(app.exec_())

Lubomir · Answer 1 · 2017-05-19T07:42:11.397

I found workaround with drawing own vertical progress bar.

Maybe somebody could use this too:

class MyBar(QtGui.QWidget):
    """ Creates custom 'vertical progress bar'"""

    def __init__(self, text, maximumValue, currentValue, parent=None):
        super(MyBar, self).__init__(parent)
        self.text = text
        self.maximumValue = maximumValue
        self.currentValue = currentValue

    def setValue(self, currentValue):
        if self.currentValue != currentValue:
            self.currentValue = currentValue
            self.repaint()

    def paintEvent(self, event):
        painter = QtGui.QPainter(self)
        painter.translate(0, self.height() - 1)
        painter.rotate(-90)

        painter.setPen(QtGui.QColor(140, 138, 135))
        painter.drawRoundedRect(QtCore.QRectF(0, 0, self.height() - 1, self.width() - 1), 4, 4)

        painter.setPen(QtGui.QColor(201, 199, 197))
        path = QtGui.QPainterPath()
        path.addRoundedRect(QtCore.QRectF(1, 1, self.height() - 3, self.width() - 3), 3, 3)

        painter.fillPath(path, QtGui.QColor(214, 212, 210))
        painter.drawPath(path)

        path = QtGui.QPainterPath()
        path.addRoundedRect(QtCore.QRectF(1, 1, (self.height() - 3) * self.currentValue / self.maximumValue, self.width() - 3), 3, 3)

        painter.fillPath(path, QtGui.QColor(255, 0, 0))
        painter.drawPath(path)

        painter.setPen(QtCore.Qt.black)
        # print text centered
        painter.drawText(5, self.width() / 2 + 5, self.text)
        painter.end()

And then to question code simply add:

progress4 = MyBar("myServer008-Load", 10, 4, self)
progress4.setGeometry(200, 50, 25, 150)

result looks like following:

result example

PyQt QProgressBar vertical text alignment issue

1 Answers1