How To Remove the Q-Chart Background Color and Make it Transparent

Question

How to remove the Q-Chart's background color (white) and make it transparent.?? So that I can maximize the size of the chart without covering other labels in my application. :)

I have tried the following:

chart.setBackgroundBrush(QColor(Qt.transparent))
chart.setBackgroundBrush(QColor(255, 255, 255, 0))
chartView.setBackgroundBrush(QColor(Qt.transparent))
chartView.setBackgroundBrush(QColor(255, 255, 255, 0))

Please see below the full code example that I have used. There is a label that I wanted to emphasize outside the chart but the chart's background is covering it.

# ==== Below is the functional Code (Start) ==== #

from PyQt5.QtWidgets import QApplication, QMainWindow, QFrame, QLabel
import sys
from PyQt5.QtChart import QChart, QChartView, QPieSeries, QPieSlice
from PyQt5.QtGui import QPainter, QPen, QFont
from PyQt5.QtCore import Qt


class Window(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("PyQtChart Pie Chart")
        self.setGeometry(100,100, 500,500)
        self.show()
        #self.create_piechart()
        self.sample_Frame()

    def sample_Frame(self):
        self.Frame1 = QFrame(self)
        self.Frame1.setFrameShape(QFrame.Box)
        self.Frame1.setFrameShadow(QFrame.Raised)
        self.Frame1.setGeometry(50, 50, 400, 400)
        self.Frame1.setStyleSheet('QFrame {background-color: gray}')

        labelFont = QFont('Calibri', 18)
        labelFont.setBold(True)
        self.Label1 = QLabel(self.Frame1)
        self.Label1.setText('The Quick Brown Fox \nJumps Over the Lazy Dog \nNear the River Bank')
        self.Label1.setFont(labelFont)
        self.Label1.move(10, 10)

        self.create_piechart()
        self.Frame1.show()

    def create_piechart(self):
        series = QPieSeries()
        series.append("Python", 80)
        series.append("C++", 70)
        series.append("Java", 50)
        series.append("C#", 40)
        series.append("PHP", 30)

        #adding slice
        slice = QPieSlice()
        slice = series.slices()[2]
        slice.setExploded(True)
        slice.setLabelVisible(True)
        slice.setPen(QPen(Qt.darkGreen, 2))
        slice.setBrush(Qt.green)

        chart = QChart()
        chart.legend().hide()
        chart.addSeries(series)
        chart.createDefaultAxes()
        chart.setAnimationOptions(QChart.SeriesAnimations)
        chart.legend().setVisible(True)
        chart.legend().setAlignment(Qt.AlignBottom)
        chartview = QChartView(chart)
        chartview.setRenderHint(QPainter.Antialiasing)
        chartview.setParent(self.Frame1)
        chartview.setGeometry(5, 50, 350, 350)
        chartview.show()


App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())

Okay, now it's better. From what I understand the entire window to be transparent except the pie diagram and the legend, am I correct? — eyllanesc, May 20 '20 at 01:38
@eyllanesc yes. :) . Cause every time I increased the chart's width and length, its background (with color) will increase as well. So I need the background to be transparent So that when I increase its geometry, it wont affect other widgets. — KaizeL, May 20 '20 at 01:46
What do you mean by other widgets? I don't see another widget in your code. — eyllanesc, May 20 '20 at 01:56
Explain better, if you are going to add a requirement then in your MRE there must be the code related to that restriction, if at the moment it is not a requirement then you should not indicate it. I say this because the possible solution depends on all the requirements, and so we can tell you if it is possible or not. — eyllanesc, May 20 '20 at 02:24

score 0 · Answer 1 · answered Sep 10 '20 at 21:23

I also came across this issue when I was trying to do the same thing. My solution was the following (borrowing your code example):

    chart = QChart()
    chart.legend().hide()
    chart.addSeries(series)
    chart.createDefaultAxes()
    chart.setAnimationOptions(QChart.SeriesAnimations)

    chart.setBackgroundBrush(QBrush(QColor("transparent")))

    chart.legend().setVisible(True)
    chart.legend().setAlignment(Qt.AlignBottom)
    chartview = QChartView(chart)
    chartview.setRenderHint(QPainter.Antialiasing)
    chartview.setParent(self.Frame1)
    chartview.setGeometry(5, 50, 350, 350)
    chartview.show()


App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())

At least for my usage and during my tests, this line makes the background transparent instead of white. It seems that you were just missing the QBrush(..) part.

Hope that helps!
Best,

Kevin

How To Remove the Q-Chart Background Color and Make it Transparent

1 Answers1