Details
-
Suggestion
-
Resolution: Unresolved
-
P3: Somewhat important
-
None
-
None
-
None
Description
In Qt Charts, i.e. ChartsView + BarSeries, multiple BarSeries instances are going to be rendered separately. For example, that:
ChartView {
anchors.fill: parent
BarCategoryAxis {
id: bar
categories: ["2020", "2021", "2022", "2023", "2024", "2025"]
}
StackedBarSeries {
axisX: bar
BarSet {
label: "Alice"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Carol"
values: [3, 5, 8, 13, 5, 8]
}
}
StackedBarSeries {
axisX: bar
BarSet {
label: "Carol"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Trent"
values: [3, 5, 8, 13, 5, 8]
}
}
}
is going to look like:
But in Qt Graphs, doing similar thing:
GraphsView {
id: graphsView
anchors.fill: parent
axisX: bar
BarCategoryAxis {
id: bar
categories: ["2020", "2021", "2022", "2023", "2024", "2025"]
}
BarSeries {
id: series0
barsType: BarSeries.BarsType.Stacked
BarSet {
label: "Alice"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Carol"
values: [3, 5, 8, 13, 5, 8]
}
}
BarSeries {
id: series1
barsType: BarSeries.BarsType.Stacked
BarSet {
label: "Carol"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Trent"
values: [3, 5, 8, 13, 5, 8]
}
}
}
results in:
The problem is that series1 completely overlaps with series 0. "Overlapping" may make sense to, e.g. LineSeries, but it is definitely confusing for BarSeries.
Temporary workaround: sophisticated barDelegate. Something like:
Component {
id: barDelegateComp0
Item {
id: comp
property color barColor
property real barValue
property int barIndex
property string barLabel
property int spacing: 0
Rectangle {
color: comp.barColor
border.color: "#000000"
width: parent.width / 2 - comp.spacing
height: parent.height
x: 0
Text {
rotation: -90
anchors.centerIn: parent
text: comp.barLabel
}
}
}
}
Component {
id: barDelegateComp1
Item {
id: comp
property color barColor
property real barValue
property int barIndex
property string barLabel
property int spacing: 0
Rectangle {
color: comp.barColor
border.color: "#000000"
width: parent.width / 2 - comp.spacing
height: parent.height
x: parent.width / 2 + comp.spacing
Text {
rotation: -90
anchors.centerIn: parent
text: comp.barLabel
}
}
}
}
GraphsView {
id: graphsView
anchors.fill: parent
axisX: bar
BarCategoryAxis {
id: bar
categories: ["2020", "2021", "2022", "2023", "2024", "2025"]
}
BarSeries {
id: series0
barsType: BarSeries.BarsType.Stacked
barDelegate: barDelegateComp0
BarSet {
label: "Alice"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Carol"
values: [3, 5, 8, 13, 5, 8]
}
}
BarSeries {
id: series1
barsType: BarSeries.BarsType.Stacked
barDelegate: barDelegateComp1
BarSet {
label: "Carol"
values: [2, 2, 3, 4, 5, 6]
}
BarSet {
label: "Bob"
values: [5, 1, 2, 4, 1, 7]
}
BarSet {
label: "Trent"
values: [3, 5, 8, 13, 5, 8]
}
}
}
And that is the complexity user has to work with when there are just 2 series instances.
Attachments
Gerrit Reviews
| For Gerrit Dashboard: QTBUG-138400 | ||||||
|---|---|---|---|---|---|---|
| # | Subject | Branch | Project | Status | CR | V |
| 660711,1 | Allow multiple BarSeries in one GraphsView | dev | qt/qtgraphs | Status: NEW | 0 | 0 |