Search code examples
vega-lite

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

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)

when the x channel is a fieldT, Temporal values

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;

when the x channel is a fieldO, Ordinal values

Solution

  • 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
}

    enter image description here

    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):

    enter image description here