Here is the link to the spec on Vega-lite Editor:
My issue is that when I select a subset of the data anywhere from the scroller and then double click to rest, the x axis values start from the first element of subset
original chart:
subset selected:
subset selected starting from 23-Feb-18
chart or deselection (i.e. double click):
rest x axis values not ordered with data
I tried Adding
sort: null,
sort: {"field": "id"},
sort: false,
completely removing "sort",
keeping sort in all encodings i.e. all x and y objects,
keeping sort only in x encoding, not y encoding.
However, nothing helped to this reset issue.
This issue does not show in a simple bar chart with scroller.
You need a correct data type. This works and you can change the format to your liking using d3 syntax.
{
"config": {
"encoding": {"sort": false},
"legend": {
"layout": {"bottom": {"anchor": "middle"}, "top": {"anchor": "middle"}}
}
},
"data": {
"values": [
{"datex": "04-Jul-14", "hoursy": 62},
{"datex": "08-Dec-14", "hoursy": 6708},
{"datex": "14-Jun-16", "hoursy": 115},
{"datex": "14-Jun-16", "hoursy": 2500},
{"datex": "06-Nov-17", "hoursy": 0},
{"datex": "17-Nov-17", "hoursy": 3903},
{"datex": "19-Nov-17", "hoursy": 85370},
{"datex": "23-Feb-18", "hoursy": 0},
{"datex": "23-Feb-18", "hoursy": 0},
{"datex": "01-Jun-18", "hoursy": 0},
{"datex": "01-Oct-18", "hoursy": 3},
{"datex": "15-May-19", "hoursy": 4202},
{"datex": "15-May-19", "hoursy": 20122},
{"datex": "29-May-19", "hoursy": 2648},
{"datex": "11-Sep-19", "hoursy": 86145},
{"datex": "05-Dec-19", "hoursy": 1291},
{"datex": "16-Dec-19", "hoursy": 20049},
{"datex": "17-Oct-21", "hoursy": 93839},
{"datex": "08-Jun-23", "hoursy": 96879},
{"datex": "08-Jun-23", "hoursy": 96879},
{"datex": "24-Jun-23", "hoursy": 19051},
{"datex": "29-Jun-14", "hoursy": 72770}
]
},
"params": [
{"name": "LegendColumn", "value": 4},
{"name": "YAxisTitleX", "value": -40},
{"name": "LegendOrient", "value": "top"},
{"name": "LegendLabelBaseline", "value": "middle"},
{"name": "LegendLabelColor", "value": "#000000"},
{"name": "LegendLabelFontSize", "value": 13},
{"name": "LegendLabellimit", "value": 0},
{"name": "LegendLabelOffset", "value": 5},
{"name": "LegendLabelOpicity", "value": 1},
{"name": "LegendSymbolOpicity", "value": 1},
{"name": "LegendSymbolSize", "value": 200},
{"name": "LegendSymbol", "value": "circle"},
{"name": "XAxisLabelAngle", "value": -45},
{"name": "XAxisTitle", "value": "Date"},
{"name": "TitleAlign", "value": "center"},
{"name": "XAxisTitleAngle", "value": 0},
{"name": "TitleAnchor", "value": "middle"},
{"name": "XAxisPostion", "value": 1},
{"name": "XAxisLabelSize", "value": 13},
{"name": "XAxisTickSize", "value": 5},
{"name": "XAxisLabelLimit", "value": 0},
{"name": "XAxisLabelColor", "value": "black"},
{"name": "XAxisTitleColor", "value": "black"},
{"name": "XAxisTitleFontSize", "value": 16},
{"name": "TitleLimit", "value": 0},
{"name": "TitleOffset", "value": 0},
{"name": "TitleFontColor", "value": "black"},
{"name": "TitleFontSize", "value": 16},
{"name": "TitleBaseline", "value": "center"},
{"name": "TitleText", "value": "Chart"},
{"name": "YAxisPostion", "value": 0},
{"name": "YAxisTickSize", "value": 2},
{"name": "YAxisLabelLimit", "value": 0},
{"name": "YAxisLabelColor", "value": "black"},
{"name": "YAxisLabelSize", "value": 13},
{"name": "YAxisTitleColor", "value": "black"},
{"name": "YAxisTitleFontSize", "value": 16},
{"name": "YAxisTitle", "value": "Hours"},
{"name": "YAxisLabelAngle", "value": -45},
{"name": "TitleDx", "value": 0},
{"name": "Subtitle", "value": ""},
{"name": "SubTitileColor", "value": "green"},
{"name": "SubtitleFont", "value": "bold"},
{"name": "SubtitleFontSize", "value": 16},
{"name": "PointAngle", "value": 12},
{"name": "PointColor", "value": "#18FE23"},
{"name": "PointSize", "value": 100},
{"name": "PointStrokeWidth", "value": 10},
{"name": "YAxisTitleAngle", "value": 270}
],
"title": {
"align": {"expr": "TitleAlign"},
"anchor": {"expr": "TitleAnchor"},
"baseline": {"expr": "TitleBaseline"},
"color": {"expr": "TitleFontColor"},
"dx": {"expr": "TitleDx"},
"fontSize": {"expr": "TitleFontSize"},
"limit": {"expr": "TitleLimit"},
"offset": {"expr": "TitleOffset"},
"subtitle": {"expr": "Subtitle"},
"subtitleColor": {"expr": "SubTitileColor"},
"subtitleFont": {"expr": "SubtitleFont"},
"subtitleFontSize": {"expr": "SubtitleFontSize"},
"text": {"expr": "TitleText"}
},
"vconcat": [
{
"encoding": {
"x": {
"axis": {
"labelAngle": {"expr": "XAxisLabelAngle"},
"labelColor": {"expr": "XAxisLabelColor"},
"labelFontSize": {"expr": "XAxisLabelSize"},
"labelLimit": {"expr": "XAxisLabelLimit"},
"position": {"expr": "XAxisPostion"},
"tickSize": {"expr": "XAxisTickSize"},
"title": {"expr": "XAxisTitle"},
"titleAngle": {"expr": "XAxisTitleAngle"},
"titleColor": {"expr": "XAxisTitleColor"},
"titleFontSize": {"expr": "XAxisTitleFontSize"},
"format": "%d/%m/%y",
"formatType": "time"
},
"field": "datex",
"timeUnit": "yearmonthdate",
"type": "temporal"
}
},
"height": 250,
"layer": [
{
"encoding": {
"color": {
"datum": "Actual Hours",
"legend": {
"columns": {"expr": "LegendColumn"},
"labelBaseline": {"expr": "LegendLabelBaseline"},
"labelColor": {"expr": "LegendLabelColor"},
"labelFontSize": {"expr": "LegendLabelFontSize"},
"labelLimit": {"expr": "LegendLabellimit"},
"labelOffset": {"expr": "LegendLabelOffset"},
"labelOpacity": {"expr": "LegendLabelOpicity"},
"orient": {"expr": "LegendOrient"},
"symbolOpacity": {"expr": "LegendSymbolOpicity"},
"symbolSize": {"expr": "LegendSymbolSize"},
"symbolType": {"expr": "LegendSymbol"},
"title": ""
},
"scale": {"range": [{"expr": "PointColor"}]}
},
"y": {
"anchor": "middle",
"axis": {
"grid": true,
"labelAngle": {"expr": "YAxisLabelAngle"},
"labelColor": {"expr": "YAxisLabelColor"},
"labelFontSize": {"expr": "YAxisLabelSize"},
"titleX": {"expr": "YAxisTitleX"},
"labelLimit": {"expr": "YAxisLabelLimit"},
"orient": "left",
"position": {"expr": "YAxisPostion"},
"tickSize": {"expr": "YAxisTickSize"},
"title": {"expr": "YAxisTitle"},
"titleAngle": {"expr": "YAxisTitleAngle"},
"titleColor": {"expr": "YAxisTitleColor"},
"titleFontSize": {"expr": "YAxisTitleFontSize"}
},
"field": "hoursy",
"scale": {"zero": false},
"title": "Hours",
"type": "quantitative",
"sort": false
}
},
"mark": {
"angle": {"expr": "PointAngle"},
"filled": true,
"size": {"expr": "PointSize"},
"strokeWidth": {"expr": "PointStrokeWidth"},
"tooltip": true,
"type": "point"
},
"params": [
{"name": "brush0", "select": {"encodings": ["x"], "type": "point"}}
]
}
],
"resolve": {"scale": {"color": "independent", "y": "independent"}},
"transform": [{"filter": {"param": "brush"}}],
"width": "container"
},
{
"encoding": {
"color": {"value": "lightGray"},
"x": {
"axis": {"labels": false, "ticks": false, "title": ""},
"field": "datex",
"sort": false,
"type": "nominal"
}
},
"height": 30,
"mark": {"type": "area"},
"params": [
{
"name": "brush",
"select": {
"clear": true,
"encodings": ["x"],
"type": "interval",
"zoom": false
}
}
],
"resolve": {"scale": {"color": "independent", "shape": "independent"}},
"view": {"fillOpacity": "1"},
"width": "container"
}
]
}