vega lite chart axis labels issue

Question

I have used this given example chart (circle_custom_tick_labels) https://vega.github.io/editor/#/examples/vega-lite/circle_custom_tick_labels for vega lite

{
"data": {
"values": [{"IMDB Rating":1}, 
{"IMDB Rating":3},
{"IMDB Rating":6},
{"IMDB Rating":72},
{"IMDB Rating":5},
{"IMDB Rating":144},
{"IMDB Rating":217},
{"IMDB Rating":7200},
{"IMDB Rating":7220},
{"IMDB Rating":14400},
{"IMDB Rating":14420},
{"IMDB Rating":21600},    
{"IMDB Rating":23698},
{"IMDB Rating":25599},
{"IMDB Rating":28800}
]
},
"mark": {"type": "tick"},
"encoding": {
"x": { 
  "axis": {
    "labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
    "labelFlush": false,       
    "values": [0, 7200, 14400, 21600, 28800]
  },
  "field": "IMDB Rating",
  "type": "quantitative",      
  "scale": {"domain": [0, 28800]},
  "title": null
},
"color": {        
    "condition": [
        {"test": "datum['IMDB Rating'] < 14400", "value": "green"},
        {"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
        {"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}],
       "value": "white"
    }       

}

When I change the dataset and give big values in thousands, and also big values for axis labels like

 "axis": {
"labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
"labelFlush": false,       
"values": [0, 7200, 14400, 21600, 28800]
}

then Labels for x-axis does not show properly. It should replace like

0 -> A,
7200 -> B,
14400 -> C,
21600 -> D,
28800 -> E

but it displays like enter image description here

For small values, it works fine like below:

 {   
  "data": {
    "values": [{"IMDB Rating":1}, 
    {"IMDB Rating":1},
    {"IMDB Rating":2},
    {"IMDB Rating":3},
    {"IMDB Rating":4},
    {"IMDB Rating":5},
    {"IMDB Rating":6},
    {"IMDB Rating":7},
    {"IMDB Rating":8},
    {"IMDB Rating":3.2},
    {"IMDB Rating":4.5}
  ]
  },
  "mark": {"type": "tick"},
  "encoding": {
    "x": { 
      "axis": {
        "labelExpr": "datum.label == 0 ? 'A' : datum.label == 2 ? 'B': datum.label == 4 ? 'C': datum.label == 6 ? 'D' : 'E'",
        "labelFlush": false,       
        "values": [0, 2, 4, 6, 8]
      },
      "field": "IMDB Rating",
      "type": "quantitative",      
      "scale": {"domain": [0, 10]},
      "title": null
    },
    "color": {        
        "condition": [
            {"test": "datum['IMDB Rating'] < 5", "value": "green"},
            {"test": "datum['IMDB Rating'] == 5 ", "value": "red"},
            {"test": "datum['IMDB Rating']  >5 ", "value": "blue"}],
           "value": "white"
        }       
  
  }
}

enter image description here

user_7734100 · Answer

Your config for labelExpr is almost correct just the condition is not working correctly because you are comparing with datum.label which seems to be a string so if you provide the condition as datum.label == '7,200' (Note: I have provided single quotes around 7200) then it will show the label B on your axis properly.

But this is not a better way, since your data input values are in number format you should not compare it according to your output. Instead, you can compare the condition with label.value as datum.value == 7200 which will work properly without changing the values type.

Below is the code snippet or refer editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "data": {
    "values": [
      {"IMDB Rating": 1},
      {"IMDB Rating": 3},
      {"IMDB Rating": 6},
      {"IMDB Rating": 72},
      {"IMDB Rating": 5},
      {"IMDB Rating": 144},
      {"IMDB Rating": 217},
      {"IMDB Rating": 7200},
      {"IMDB Rating": 7220},
      {"IMDB Rating": 14400},
      {"IMDB Rating": 14420},
      {"IMDB Rating": 21600},
      {"IMDB Rating": 23698},
      {"IMDB Rating": 25599},
      {"IMDB Rating": 28800}
    ]
  },
  "mark": {"type": "tick"},
  "encoding": {
    "x": {
      "axis": {
        "labelExpr": "datum.value == 0 ? 'A' : datum.value == 7200 ? 'B': datum.value == 14400 ? 'C': datum.value == 21600 ? 'D' : 'E'",
        "labelFlush": false,
        "formatType": "number",
        "values": [0, 7200, 14400, 21600, 28800]
      },
      "field": "IMDB Rating",
      "type": "quantitative",
      "scale": {"domain": [0, 28800]},
      "title": null
    },
    "color": {
      "condition": [
        {"test": "datum['IMDB Rating'] < 14400", "value": "green"},
        {"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
        {"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}
      ],
      "value": "white"
    }
  }
}

vega lite chart axis labels issue

1 Answers