@mrjj Thank you for your answer. So I tested to remove the text rectangle passed to the drawContents() function, and indeed the global clipping was applied instead.

For sure it can be measured, and I do agree with the approach "if it works fine, just use it".

But I am still curious, why clipping is expensive in the first place, so that the warning exists in the docs? Has anyone experienced performance impact while actively using clipping for real-time chart?

You can make a "container widget" that will handle the showing of the label properly.

Thanks, I tried the OpacityMask again as you suggested and it works now. It took me a bit to get it right, because i) I had a warning about the recursive property in ShaderEffectSource needing to be set to "true" and ii) the mask size needs to be the same as the source size for it to work properly. After a while I noticed that i) originated from some code in the contentItem of the button using the ColorOverlay (in fact it was the same problem there i.e. I tried to apply it to the parent). To fix ii) I used a transparent frame so that the code now looks something like:

background: Item{ width: control.width height: control.height Rectangle{ id: progressFrame anchors.fill: parent color: "transparent" visible: false Rectangle{ id: progressRect width: 0.7*parent.width height: parent.height anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left color: "green" } } Rectangle { id: backgroundRect anchors.fill: parent radius: height / 2 color: "red" visible: true } OpacityMask{ anchors.fill: progressFrame source: progressFrame maskSource: backgroundRect } }

Resulting in:
0_1516730617237_960aab10-96cd-4f9e-b86d-afd96504a439-image.png

Thanks again!