I am trying to create a bar chart having multiple bar with dual y axis in time series data. Issue is that when we try to create mutilpe bar and use xoffset the bar ran out of the canvas of chart. Editor link
I want both bar must be cover inside canvas irrespective of data count
Try setting a rangeMax.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Line chart with conditional axis ticks, labels, and grid.",
"data": {
"values": [
{
"symbol": "GOOG",
"date": "Jan 1 2006",
"previous": 432.66,
"current": 235
},
{
"symbol": "GOOG",
"date": "Feb 1 2006",
"previous": 362.62,
"current": 205
},
{"symbol": "GOOG", "date": "Mar 1 2006", "previous": 390, "current": 250},
{
"symbol": "GOOG",
"date": "Apr 1 2006",
"previous": 417.94,
"current": 215
},
{
"symbol": "GOOG",
"date": "May 1 2006",
"previous": 371.82,
"current": 225
},
{
"symbol": "GOOG",
"date": "Jun 1 2006",
"previous": 419.33,
"current": 205
},
{
"symbol": "GOOG",
"date": "Jul 1 2006",
"previous": 386.6,
"current": 215
},
{
"symbol": "GOOG",
"date": "Aug 1 2006",
"previous": 378.53,
"current": 250
},
{
"symbol": "GOOG",
"date": "Sep 1 2006",
"previous": 401.9,
"current": 255
},
{
"symbol": "GOOG",
"date": "Oct 1 2006",
"previous": 476.39,
"current": 235
},
{
"symbol": "GOOG",
"date": "Nov 1 2006",
"previous": 484.81,
"current": 248
},
{
"symbol": "GOOG",
"date": "Dec 1 2006",
"previous": 460.48,
"current": 259
},
{
"symbol": "GOOG",
"date": "Jan 1 2007",
"previous": 501.5,
"current": 300
},
{
"symbol": "GOOG",
"date": "Feb 1 2007",
"previous": 449.45,
"current": 310
},
{
"symbol": "GOOG",
"date": "Mar 1 2007",
"previous": 458.16,
"current": 315
},
{
"symbol": "GOOG",
"date": "Apr 1 2007",
"previous": 471.38,
"current": 320
}
]
},
"autosize": {"type": "fit", "contains": "padding"},
"width": 1200,
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"nice": false, "rangeMax":980},
"axis": {
"labelAlign": "left",
"labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"labelOffset": 1,
"labelPadding": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": -24
},
"value": 0
},
"tickSize": {
"condition": {
"test": {"field": "value", "timeUnit": "month", "equal": 1},
"value": 30
},
"value": 2
}
}
}
},
"layer": [
{
"mark": {"type": "bar", "width": 15, "xOffset": 10},
"encoding": {
"y": {"field": "previous", "type": "quantitative"},
"color": {"datum": "Previous Period", "scale": {"range": ["orange"]}}
}
},
{
"mark": {"type": "bar", "width": 15},
"encoding": {
"y": {"field": "current", "type": "quantitative"},
"color": {"datum": " Current Period", "scale": {"range": ["#D3D3D3"]}}
}
}
],
"resolve": {"scale": {"color": "independent", "y": "independent"}},
"config": {"axis": {"domainColor": "#ddd", "tickColor": "#ddd"}}
}