Scrollbar in Vega-Lite for Gantt-Chart - Data Studio - google-data-studio

Question

I'm using Vega-Lite for Data Studio and I've created an interactive Gantt-Chart
Like in the image below :
[gantt-chart sample] https://i.stack.imgur.com/xZ4RA.png
However, I have a lot of data and my chart is limited by fixed height and width. Like this :
[gantt-chart-lots-of-data] https://i.stack.imgur.com/2fFhQ.png
So my question is, how can I add a vertical scrollbar ? Or do I have the possibility to zoom-in/out on y-axis ?
I've already setup the possibility to interact with data (drag, zoom-in/out) by using "selection interval" parameter. I would like to do the same with "tasks" (see example below)
For the example, I've fixed the height to illustrate the fact that my data are tightly packed together.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Gantt Chart.",
"background" : "#fbfbfb",
"height" : 80,
"data": {
"values": [
{"task": "A", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
{"task": "B", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "C", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
{"task": "D", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
{"task": "E", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
{"task": "F", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
{"task": "G", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "H", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "I", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "J", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "K", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "L", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "M", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "N", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "O", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "P", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
{"task": "Q", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
{"task": "R", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "S", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
{"task": "T", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
{"task": "U", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
{"task": "V", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
{"task": "W", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "X", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "Y", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "Z", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "ZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "ZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "ZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "ZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "ZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1}
]
},
"layer": [
{
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"y": {
"title":"task",
"field": "task",
"type": "nominal"
},
"x": {
"timeUnit": "yearmonthdate",
"field": "start",
"type" : "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"x2": {
"timeUnit": "yearmonthdate",
"field": "end",
"type" : "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"color": {
"aggregate": "sum",
"field": "metric",
"type": "quantitative",
"format" : ".2%",
"title":["metric"],
"scale":{
"range": [
"#e57373",
"#ffd54f",
"#81c784"
],
"domain": [0,1]
},
"values" : [0,1],
"legend": {"labelExpr": "[datum.label]*100+\"%\""},
"condition": [
{
"selection": "hover",
"value": "#17c5e8"
}
]
}
},
"selection": {
"hover": {
"type": "single",
"empty": "none",
"on": "mouseover",
"clear": "mouseout"
},
"grid": {
"type": "interval",
"bind": "scales"
}
}
},{
"mark": {
"type": "rule",
"color": "red",
"size": 1,
"tooltip" : true
},
"transform": [
{
"calculate": "now()",
"as": "Today"
}
],
"encoding": {
"x": {
"field": "Today",
"type": "temporal"
}
}
}
]
}
EDIT : I tried the following config, but it doesn't work correctly...
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Gantt Chart.",
"background" : "#fbfbfb",
"data": {
"values": [
{"task": "A", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
{"task": "B", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "C", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
{"task": "D", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
{"task": "E", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
{"task": "F", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
{"task": "G", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "H", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "I", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "J", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "K", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "L", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "M", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "N", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "O", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "P", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
{"task": "Q", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
{"task": "R", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "S", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
{"task": "T", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
{"task": "U", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
{"task": "V", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
{"task": "W", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "X", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "Y", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "Z", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "ZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "ZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "ZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "ZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "ZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
{"task": "ZG", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZH", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "ZI", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "ZJ", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "ZK", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "ZL", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "ZM", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "ZN", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "ZO", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZP", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1},
{"task": "ZQ", "start": "2021-01-01", "end": "2021-05-01", "landing": "2021-04-01", "metric" : 1},
{"task": "ZR", "start": "2021-03-01", "end": "2021-08-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "ZS", "start": "2021-05-01", "end": "2021-07-01", "landing": "2021-04-01", "metric" : 0.7},
{"task": "ZT", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.3},
{"task": "ZU", "start": "2021-07-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.2},
{"task": "ZV", "start": "2021-08-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.1},
{"task": "ZW", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZX", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.5},
{"task": "ZY", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.8},
{"task": "ZZ", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.9},
{"task": "ZZA", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 1},
{"task": "ZZB", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.4},
{"task": "ZZC", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0.3},
{"task": "ZZD", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 0.2},
{"task": "ZZE", "start": "2021-01-01", "end": "2021-03-01", "landing": "2021-04-01", "metric" : 0},
{"task": "ZZF", "start": "2021-02-01", "end": "2021-05-01", "landing": "2021-06-01", "metric" : 1}
]
},
"hconcat": [
{
"width" : 50,
"height" : 150,
"mark": {"type": "bar", "fill": "lightgray"},
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": ["y"]
}
}
],
"encoding": {
"y": {"field": "task", "type": "nominal"},
"x": {
"field": "start",
"type": "temporal",
"axis": {"tickCount": 3, "grid": false}
},
"x2": {
"field": "end",
"type": "temporal"
}
}
},
{
"width" : 300,
"height" : 150,
"mark": {"type" : "bar", "tooltip" : true},
"encoding": {
"y": {
"field": "task",
"scale": {"domain": {"param": "brush"}},
"axis": {"title": ""}
},
"x": {
"timeUnit": "yearmonthdate",
"field": "start",
"type" : "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"x2": {
"timeUnit": "yearmonthdate",
"field": "end",
"type" : "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"color": {
"aggregate": "sum",
"field": "metric",
"type": "quantitative",
"format" : ".2%",
"title":["metric"],
"scale":{
"range": [
"#e57373",
"#ffd54f",
"#81c784"
],
"domain": [0,1]
},
"values" : [0,1],
"legend": {"labelExpr": "[datum.label]*100+\"%\""},
"condition": [
{
"selection": "hover",
"value": "#17c5e8"
}
]
}
},
"selection": {
"hover": {
"type": "single",
"empty": "none",
"on": "mouseover",
"clear": "mouseout"
},
"grid": {
"type": "interval",
"bind": "scales"
}
}
}
]
}
As the picture in the link below shows, there're overlaping bars... https://i.stack.imgur.com/q75O1.png

Answer 1

Instead of using scale with param, you can provide filter transform and use the params to filter out the 2nd chart data.
Refer the below code or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Gantt Chart.",
"background": "#fbfbfb",
"data": {
"values": [
{
"task": "A",
"start": "2021-01-01",
"end": "2021-05-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "B",
"start": "2021-03-01",
"end": "2021-08-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "C",
"start": "2021-05-01",
"end": "2021-07-01",
"landing": "2021-04-01",
"metric": 0.7
},
{
"task": "D",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.3
},
{
"task": "E",
"start": "2021-07-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.2
},
{
"task": "F",
"start": "2021-08-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.1
},
{
"task": "G",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "H",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "I",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.8
},
{
"task": "J",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.9
},
{
"task": "K",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "L",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.4
},
{
"task": "M",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.3
},
{
"task": "N",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.2
},
{
"task": "O",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "P",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 1
},
{
"task": "Q",
"start": "2021-01-01",
"end": "2021-05-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "R",
"start": "2021-03-01",
"end": "2021-08-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "S",
"start": "2021-05-01",
"end": "2021-07-01",
"landing": "2021-04-01",
"metric": 0.7
},
{
"task": "T",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.3
},
{
"task": "U",
"start": "2021-07-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.2
},
{
"task": "V",
"start": "2021-08-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.1
},
{
"task": "W",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "X",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "Y",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.8
},
{
"task": "Z",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.9
},
{
"task": "ZA",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "ZB",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.4
},
{
"task": "ZC",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.3
},
{
"task": "ZD",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.2
},
{
"task": "ZE",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "ZF",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 1
},
{
"task": "ZG",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "ZH",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "ZI",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.8
},
{
"task": "ZJ",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.9
},
{
"task": "ZK",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "ZL",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.4
},
{
"task": "ZM",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.3
},
{
"task": "ZN",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.2
},
{
"task": "ZO",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "ZP",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 1
},
{
"task": "ZQ",
"start": "2021-01-01",
"end": "2021-05-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "ZR",
"start": "2021-03-01",
"end": "2021-08-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "ZS",
"start": "2021-05-01",
"end": "2021-07-01",
"landing": "2021-04-01",
"metric": 0.7
},
{
"task": "ZT",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.3
},
{
"task": "ZU",
"start": "2021-07-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.2
},
{
"task": "ZV",
"start": "2021-08-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.1
},
{
"task": "ZW",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "ZX",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.5
},
{
"task": "ZY",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.8
},
{
"task": "ZZ",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.9
},
{
"task": "ZZA",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 1
},
{
"task": "ZZB",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.4
},
{
"task": "ZZC",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0.3
},
{
"task": "ZZD",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 0.2
},
{
"task": "ZZE",
"start": "2021-01-01",
"end": "2021-03-01",
"landing": "2021-04-01",
"metric": 0
},
{
"task": "ZZF",
"start": "2021-02-01",
"end": "2021-05-01",
"landing": "2021-06-01",
"metric": 1
}
]
},
"transform": [
{"window": [{"field": "task", "op": "row_number", "as": "taskRow"}]}
],
"hconcat": [
{
"width": 50,
"height": 150,
"mark": {"type": "bar", "fill": "lightgray"},
"params": [
{"name": "brush", "select": {"type": "interval", "encodings": ["y"]}}
],
"encoding": {
"y": {"field": "task", "type": "nominal"},
"x": {
"field": "start",
"type": "temporal",
"axis": {"tickCount": 3, "grid": false}
},
"x2": {"field": "end", "type": "temporal"}
}
},
{
"width": 300,
"height": 150,
"mark": {"type": "bar", "tooltip": true},
"transform": [
{
"filter": "brush.task ? indexof(slice(brush.task,0,5), datum.task) > -1 : datum.taskRow < 6"
}
],
"encoding": {
"y": {"field": "task", "axis": {"title": ""}},
"x": {
"timeUnit": "yearmonthdate",
"field": "start",
"type": "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"x2": {
"timeUnit": "yearmonthdate",
"field": "end",
"type": "temporal",
"axis": {
"tickCount": 12,
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%d %b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 4,
"labelPadding": -24,
"tickSize": 30,
"gridDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
},
"tickDash": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": []
},
"value": [2, 2]
}
}
},
"color": {
"aggregate": "sum",
"field": "metric",
"type": "quantitative",
"format": ".2%",
"title": ["metric"],
"scale": {
"range": ["#e57373", "#ffd54f", "#81c784"],
"domain": [0, 1]
},
"values": [0, 1],
"legend": {"labelExpr": "[datum.label]*100+\"%\""},
"condition": [{"selection": "hover", "value": "#17c5e8"}]
}
},
"selection": {
"hover": {
"type": "single",
"empty": "none",
"on": "mouseover",
"clear": "mouseout"
},
"grid": {"type": "interval", "bind": "scales"}
}
}
]
}
If 5 selections are not required then change the filter to:
{
"filter": "brush.task ? indexof(brush.task, datum.task) > -1 : datum.taskRow < 6"
}