I am trying to set a default zoom for a chart using the scale-domain method like in this example in the documentation. However my x-axis is temporal and I want the domain to change over time so that the chart always shows the last 12 calendar months of data on first load (users then can look back and forward by interacting with the chart).
I have no trouble setting the year and date values as expressions, but when setting "month": "month(now())" I get this error: Invalid month: "month(now())". The expression works fine when I put it into the year or date value, but something seems to be going wrong for the month value.
Vega editor link to reproducible example
{
"mark": {"type": "line", "color": "red"},
"selection": {"grid": {"type": "interval", "bind": "scales"}},
"encoding": {
"x": {
"field": "period",
"type": "temporal",
"scale": {
"type": "time",
"domain": [
{"year": "year(now()) - 1", "month": "month(now())", "date": 1},
{"year": "year(now())", "month": "month(now())", "date": 1}
]
}
},
"y": {"field": "utilization", "type": "quantitative"}
}
}
Setting month to 3 works fine but is not a good solution for my app
Have a look at the generated Vega. I think you鈥檙e using an undocumented behavior that just happens to work in some cases. The better alternative would be to use the experimental signal support.
Ah I see, that would explain it, thanks @domoritz .
I think #3818 would also also be a viable solution here if/when it gets implemented, as I could define the min and max domains as calculated fields and then reference them.
In the meantime we'll look into another way to implement the feature, feel free to close the issue.
Here is the solution (I think)
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"mark": {"type": "line", "color": "red"},
"selection": {"grid": {"type": "interval", "bind": "scales"}},
"encoding": {
"x": {
"field": "period",
"type": "temporal",
"scale": {
"type": "time",
"domain": [
{"signal": "datetime(year(now())-1, month(now()), 1)"},
{"signal": "datetime(year(now()), month(now()), 1)"}
]
}
},
"y": {"field": "utilization", "type": "quantitative"}
}
}
Most helpful comment
Here is the solution (I think)