Search code examples
jsonchartsvisualizationvega-lite

How to show y-axis nominal labels, regardless of whether there is data

I have some a simple bar chart, and at times some of the y-axis nominal categories do not have any data associated with them. However, I do still want to show these values on the chart, for consistency purposes. This is a simplified example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Bar chart with text labels. Set domain to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "A", "b": null},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": null},
      {"a": "E", "b": 20}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal"},
    "x": {"field": "b", "type": "quantitative"}
  },
  "layer": [{
    "mark": "point"
  }]
}

It returns me this:

enter image description here

But I'd like to see the following:

enter image description here

I managed to do it by making them 0 and adding the following condition:

"opacity": {
   "condition":{"test": "datum['b'] == 0", "value": 0}, "value": 1
}

but wondering if there is a more elegant approach, especially as my use case is more complex and depends on dates, not numbers

Open the Chart in the Vega Editor

Solution

  • The problem is VL is generating an isValid filter in the underlying Vega. Your approach is fine. Here is an alternative:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Bar chart with text labels. Set domain to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "A", "b": -1},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "D", "b": -1},
      {"a": "E", "b": 20}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal"},
    "x": {"field": "b", "type": "quantitative", "scale":{"domainMin":0}}
  },
  "layer": [{ "mark":{"type": "point", "clip":true}  }]
}