Vega-lite Duplicate x-axis labels - vega

Question

The image says it all really, there are duplicate labels for each day and what I really want is just one label per bar. My data set consists of 8 data points:
[
{
"date":"2019-06-21T00:00:00.000Z",
"value":44.6,
},
{
"date":"2019-06-22T00:00:00.000Z",
"value":916.4,
},
{
"date":"2019-06-23T00:00:00.000Z",
"value":948.4,
},
{
"date":"2019-06-24T00:00:00.000Z",
"value":872.4,
},
{
"date":"2019-06-25T00:00:00.000Z",
"value":952.4,
},
{
"date":"2019-06-26T00:00:00.000Z",
"value":1006.4,
},
{
"date":"2019-06-27T00:00:00.000Z",
"value":945.4,
},
{
"date":"2019-06-28T00:00:00.000Z",
"value":320.8,
}
]
And my chart definition is as follows:
{
'$schema': 'https://vega.github.io/schema/vega-lite/v3.json',
'description': 'Electricity consumption by month',
'height': 320,
'autosize': {
'type': 'fit',
'resize': false,
'contains': 'padding'
},
'layer': [{
'data': {
'name': 'data'
},
'layer': [{
'mark': 'bar',
'encoding': {
'x': { 'field': 'date', 'timeUnit': 'day', 'type': 'temporal', 'axis': { 'grid': false, 'labelAngle': 0 } },
'y': {
'field': 'value',
'type': 'quantitative',
'axis': {
'format': '.2f',
'title': 'kwh'
}
}
}
}
]
}]
}
Additonally, I think the values are being bucketed by day as there are 7 bars and 8 data points, but what I really want a bar per data point.
So I think I have two questions:
how can I remove the duplicate labels?
how can I remove the bucketing but still label the x-axis with the name of the day? This chart is suppose to show "last 8 days", with a bar per day.

Answer 1

Both of your issues are caused by your specification of "timeUnit": "day". What this says is that you'd like all of your values put into seven buckets, labeled by day of the week, and that all axis labels should consist only of the day.
So I would try the following:
replace "timeUnit": "day" with "timeUnit": "yearmonthdate" so you are no longer binning your data into seven day-of-week categories
use "format": "%A" in the axis to format your labels as day of week (see d3-time-format for more information).
Additionally, bars look better with an ordinal type rather than a temporal or quantitative type, and this will ensure that there are no duplicate labels
With a bit of additional cleanup (putting your data inline, using double quotes rather than single to make it valid in JSON, setting an explicit width for reproducibility regardless of embedding environment, and removing the two extraneous nested layer statements) this is the result (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Electricity consumption by month",
"height": 320,
"width": 320,
"data": {
"values": [
{
"date": "2019-06-21T00:00:00.000Z",
"value": 44.6
},
{
"date": "2019-06-22T00:00:00.000Z",
"value": 916.4
},
{
"date": "2019-06-23T00:00:00.000Z",
"value": 948.4
},
{
"date": "2019-06-24T00:00:00.000Z",
"value": 872.4
},
{
"date": "2019-06-25T00:00:00.000Z",
"value": 952.4
},
{
"date": "2019-06-26T00:00:00.000Z",
"value": 1006.4
},
{
"date": "2019-06-27T00:00:00.000Z",
"value": 945.4
},
{
"date": "2019-06-28T00:00:00.000Z",
"value": 320.8
}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "date",
"timeUnit": "yearmonthdate",
"type": "ordinal",
"axis": {
"grid": false,
"format": "%A",
"labelAngle": 0
}
},
"y": {
"field": "value",
"type": "quantitative",
"axis": {
"format": ".2f",
"title": "kwh"
}
}
}
}

Answer 2

Use labelSeparation in axis vega-config.
https://vega.github.io/vega-lite/docs/axis.html#labels
You can do something like :
labelSeparation : 200
Adjust as per your need.