Vega-lite: the bar chart is too thin when x channel is a fieldT, how can align it better and adjust width or padding? - vega-lite

Question

I am making some bar charts with vega-lite, using vega-lite-api; the raw data comes with a field called "month" with values like "2020/09" "2020/08" ... "2019/06" ...
the fieldT recognized it nicely, and I can apply a brush to select narrower time ranges; but then the bar charts don't look good, it seems always a fixed value of width, too thin and the spacing between is too wide,
but in this visual, what makes more sense is to make the bar aligned to center of a month, because the data on y axis is aggregated for the whole month, not of a single date (first date of the month);
So how can make these bars to cover since beginning of each month till end of the month, and just leave a little gap (like 5px between? like in the fieldO below)
if change x channel to use fieldO of Ordinal values instead, then the width is better to wanted, and it adapts width well when brush select changes; but the month labels would be left as is, not so good;

Answer 1

It sounds like the feature you're looking for is the Time Unit. If you apply a timeUnit to a temporal encoding, it will cause the visual representation of the feature to fill the given timespan.
For example, here is some data similar to yours that uses a raw temporal encoding (view in editor):
{
"mark": "bar",
"encoding": {
"x": {"field": "month", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"}
},
"data": {
"values": [
{"month": "2019/01", "value": 1}, {"month": "2019/02", "value": 2}, {"month": "2019/03", "value": 1},
{"month": "2019/04", "value": 4}, {"month": "2019/05", "value": 7}, {"month": "2019/06", "value": 3},
{"month": "2019/07", "value": 4}, {"month": "2019/08", "value": 6}, {"month": "2019/09", "value": 8},
{"month": "2019/10", "value": 10}, {"month": "2019/11", "value": 7}, {"month": "2019/12", "value": 5},
{"month": "2020/01", "value": 6}, {"month": "2020/02", "value": 9}, {"month": "2020/03", "value": 8},
{"month": "2020/04", "value": 10}, {"month": "2020/05", "value": 11}, {"month": "2020/06", "value": 9},
{"month": "2020/07", "value": 14}, {"month": "2020/08", "value": 15}, {"month": "2020/09", "value": 13},
{"month": "2020/10", "value": 10}, {"month": "2020/11", "value": 16}, {"month": "2020/12", "value": 18}
]
},
"width": 500
}
You can apply a yearmonth timeUnit to the x encoding like this:
"x": {"field": "month", "type": "temporal", "timeUnit": "yearmonth"},
If you do so, the result looks like this (view in editor):