Vega-lite Duplicate x-axis labels

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:

1. how can I remove the duplicate labels?

2. 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

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.

Answer 2

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"
      }
    }
  }
}