Vega-Lite : Stacked Grouped Bar Chart - google-data-studio

Question

I'm using Vega-Lite for Data Studio and I'm trying to create a Stacked AND Grouped bar chart.
For the moment, I have this result : https://i.stack.imgur.com/HO1wR.png
However, what I want to do is to have LEFT bars with GREEN gradient & RIGHT bars with BLUE gradient.
So my question is : How can I perform this kind of chart ?
e.g : https://i.stack.imgur.com/J5223.png
Here, you'll find what I've done :
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values" : [
{"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
{"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
{"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
]
},
"height" : 200,
"width" : 500,
"encoding": {
"tooltip" : [
{"field" : "Team"},
{"field" : "Task"},
{"field" : "Done"},
{"field" : "Planned"},
{"field" : "Activity_Type"}
],
"y": {"axis": {"title": "Number of points"}},
"x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
},
"layer": [
{
"mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
"encoding": {
"y": {
"field": "Done",
"type": "quantitative"
},
"color": {
"field": "Activity_Type",
"type": "nominal",
"scale": {
"range": ["#81c784", "#629b65", "#3d683f"] // GREEN GRADIENT
},
"title": "Activity_Type",
"legend" : null
}
}
},
{
"mark": {
"type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
},
"encoding": {
"y": {
"field": "Planned",
"type": "quantitative"
},
"color": {
"field": "Activity_Type",
"type": "nominal",
"scale": {
"range": ["#1e88e5", "#2f75b3", "#255279"] // BLUE GRADIENT
},
"legend" : null
}
}
}
]
}
Thanks by advance for your help !

Answer 1

I've finally found a solution that does the job !
For people who wants, here's my solution :
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values" : [
{"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
{"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
{"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
{"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
]
},
"height" : 200,
"width" : 500,
"encoding": {
"tooltip" : [
{"field" : "Team"},
{"field" : "Task"},
{"field" : "Done"},
{"field" : "Planned"},
{"field" : "Activity_Type"}
],
"y": {"axis": {"title": "Number of points"}},
"x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
},
"layer": [
{
"mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
"encoding": {
"y": {
"field": "Done",
"type": "quantitative"
},
"color": {
"condition" : [
{"test" : "datum.Activity_Type === 'TypeA'", "value" : "#629b65"},
{"test" : "datum.Activity_Type === 'TypeB'", "value" : "#81c784"}
],
"value": "#3d683f"
}
}
},
{
"mark": {
"type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
},
"encoding": {
"y": {
"field": "Planned",
"type": "quantitative"
},
"color": {
"condition" : [
{"test" : "datum.Activity_Type === 'TypeA'","value" : "#1e88e5"},
{"test" : "datum.Activity_Type === 'TypeB'","value" : "#2f75b3"}
],
"value": "#255279"
}
}
}
]
}
It looks like this: