Axis label formatting is unpredictable for temporal variables at large width

Please:

• Check for duplicate issues. Please file separate requests as separate issues.
• Describe how to reproduce the bug.
• Use the latest versions of Vega and Vega-Lite.
• Provide an minimal, reproducible example spec in JSON, wrapped by triple backticks like this.
• If applicable, include error messages and screenshots, GIF videos (e.g. using https://www.cockos.com/licecap/), or working examples (e.g. by clicking share in the Vega-Editor or https://bit.ly/vega-lite-blocks)

The axis label formatting for “temporal” variables seems buggy or unpredictable.

I’ve included a minimal example spec below. In the Vega-Lite editor (link), you can see the axis labels look like this:

The labels seem to switch randomly between different formats. For example, certain labels like “Nov 07”, “Nov 21” or “Dec 05” switch to month instead of day of week.

Strangely, labels look fine at width 960 or less, but get wacky at any width 961 or more.

What’s the best way to fix this? I could set my own format string, but ideally I’d rely on Vega-Lite’s logic here.

Seems like a bug?

{
    "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
    "mark":"bar",
    "encoding": {
        "x":{
            "field":"created_at",
            "type":"temporal",
            "axis":{
                "labelAngle":-90
            }
        },
        "y":{
            "field":"row_count",
            "type":"quantitative"
        }
    },
    "width":1200,
    "height":480,
    "data":{
        "values":[
            {"created_at":1635724800000,"row_count":3220},
            {"created_at":1635811200000,"row_count":3250},
            {"created_at":1635897600000,"row_count":3400},
            {"created_at":1635984000000,"row_count":3050},
            {"created_at":1636070400000,"row_count":3750},
            {"created_at":1636156800000,"row_count":2950},
            {"created_at":1636243200000,"row_count":3717},
            {"created_at":1636329600000,"row_count":3382},
            {"created_at":1636416000000,"row_count":3850},
            {"created_at":1636502400000,"row_count":3300},
            {"created_at":1636588800000,"row_count":3800},
            {"created_at":1636675200000,"row_count":4250},
            {"created_at":1636761600000,"row_count":4400},
            {"created_at":1636848000000,"row_count":3850},
            {"created_at":1636934400000,"row_count":3600},
            {"created_at":1637020800000,"row_count":3650},
            {"created_at":1637107200000,"row_count":3950},
            {"created_at":1637193600000,"row_count":3200},
            {"created_at":1637280000000,"row_count":4450},
            {"created_at":1637366400000,"row_count":5400},
            {"created_at":1637452800000,"row_count":4000},
            {"created_at":1637539200000,"row_count":3900},
            {"created_at":1637625600000,"row_count":3700},
            {"created_at":1637712000000,"row_count":4600},
            {"created_at":1637798400000,"row_count":3900},
            {"created_at":1637884800000,"row_count":3950},
            {"created_at":1637971200000,"row_count":3800},
            {"created_at":1638057600000,"row_count":3450},
            {"created_at":1638144000000,"row_count":3800},
            {"created_at":1638230400000,"row_count":4500},
            {"created_at":1638316800000,"row_count":4000},
            {"created_at":1638403200000,"row_count":4950},
            {"created_at":1638489600000,"row_count":4400},
            {"created_at":1638576000000,"row_count":4550},
            {"created_at":1638662400000,"row_count":4550},
            {"created_at":1638748800000,"row_count":4650},
            {"created_at":1638835200000,"row_count":5550},
            {"created_at":1638921600000,"row_count":3900},
            {"created_at":1639008000000,"row_count":5600},
            {"created_at":1639094400000,"row_count":4400},
            {"created_at":1639180800000,"row_count":5150},
            {"created_at":1639267200000,"row_count":4450},
            {"created_at":1639353600000,"row_count":5800},
            {"created_at":1639440000000,"row_count":5400},
            {"created_at":1639526400000,"row_count":5600},
            {"created_at":1639612800000,"row_count":5600},
            {"created_at":1639699200000,"row_count":6000},
            {"created_at":1639785600000,"row_count":5250},
            {"created_at":1639872000000,"row_count":4850},
            {"created_at":1639958400000,"row_count":5000},
            {"created_at":1640044800000,"row_count":5200},
            {"created_at":1640131200000,"row_count":6550},
            {"created_at":1640217600000,"row_count":6050},
            {"created_at":1640304000000,"row_count":6100},
            {"created_at":1640390400000,"row_count":5400},
            {"created_at":1640476800000,"row_count":5100},
            {"created_at":1640563200000,"row_count":5150},
            {"created_at":1640649600000,"row_count":5650},
            {"created_at":1640736000000,"row_count":5100},
            {"created_at":1640822400000,"row_count":6000},
            {"created_at":1640908800000,"row_count":5750},
            {"created_at":1640995200000,"row_count":5750},
            {"created_at":1641081600000,"row_count":6300},
            {"created_at":1641168000000,"row_count":5300},
            {"created_at":1641254400000,"row_count":5450},
            {"created_at":1641340800000,"row_count":7250},
            {"created_at":1641427200000,"row_count":6100},
            {"created_at":1641513600000,"row_count":6200},
            {"created_at":1641600000000,"row_count":6250},
            {"created_at":1641686400000,"row_count":7650},
            {"created_at":1641772800000,"row_count":7800},
            {"created_at":1641859200000,"row_count":6800},
            {"created_at":1641945600000,"row_count":5600},
            {"created_at":1642032000000,"row_count":6300},
            {"created_at":1642118400000,"row_count":7050},
            {"created_at":1642204800000,"row_count":6700},
            {"created_at":1642291200000,"row_count":7000},
            {"created_at":1642377600000,"row_count":7300},
            {"created_at":1642464000000,"row_count":7600},
            {"created_at":1642550400000,"row_count":7550},
            {"created_at":1642636800000,"row_count":8000},
            {"created_at":1642723200000,"row_count":8950},
            {"created_at":1642809600000,"row_count":6350},
            {"created_at":1642896000000,"row_count":8800},
            {"created_at":1642982400000,"row_count":8800},
            {"created_at":1643068800000,"row_count":7900},
            {"created_at":1643155200000,"row_count":7400},
            {"created_at":1643241600000,"row_count":8350},
            {"created_at":1643328000000,"row_count":7850},
            {"created_at":1643414400000,"row_count":8750},
            {"created_at":1643500800000,"row_count":8100},
            {"created_at":1643587200000,"row_count":9081}
        ]
    }
}

[domoritz]

Let’s close it. Changing the default is a big design exercise.

[stas-sl]

I believe this more Vega’s issue. If not specified explicitly, it uses dynamic time format:

{
  "year": "%Y",
  "quarter": "%B",
  "month": "%B",
  "week": "%b %d",
  "date": "%a %d",
  "hours": "%I %p",
  "minutes": "%I:%M",
  "seconds": ":%S",
  "milliseconds": ".%L"
}

It means, that if a tick matches week/month/year boundary, it will be formatted differently. While it works well for months/years, mixing different date/week formats might be confusing. So probably it could be a good idea to change the defaults in Vega.

The logic is here:

  return date => (
    second(date) < date ? L :
    minute(date) < date ? S :
    hour(date) < date ? M :
    day(date) < date ? H :
    month(date) < date ? (week(date) < date ? d : w) :
    year(date) < date ? (quarter(date) < date ? m : q) :
    y)(date);
}