CODEWITHSUNDEEP
svgchartsaxis-labelsvegavega-lite
JK.
JK.

Reputation: 21808

Vega lite use one data field for the axis and another for the label

In Vega Lite, is it possible to use one field of the data values as the axis value, and another field as the label?

If this is my vega lite spec, then the graph works correctly, but shows the dates on the x-axis. How can I show the day names on the x-axis instead?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "basic line graph",
  "data": {
    "values": [
        {"date":"2017-08-15", "dayName":"Tue","item":"foo","count":"0"},
        {"date":"2017-08-16", "dayName":"Wed","item":"foo","count":"11"},
        {"date":"2017-08-17", "dayName":"Thu","item":"foo","count":"7"},
        {"date":"2017-08-18", "dayName":"Fri","item":"foo","count":"28"},
        {"date":"2017-08-19", "dayName":"Sat","item":"foo","count":"0"},
        {"date":"2017-08-20", "dayName":"Sun","item":"foo","count":"0"},
        {"date":"2017-08-21", "dayName":"Mon","item":"foo","count":"0"}
    ]},
  "mark": {
    "type": "line",
    "interpolate": "monotone"
  },
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "count", "type": "quantitative"}
  }
}

enter image description here

It shows the date field, August 16, August 17 on the x-axis. How can I make it show the dayName field instead? It should show Tue, Wed, and so on.

Upvotes: 4

Views: 872

Answers (1)

kanitw
kanitw

Reputation: 892

You can use timeUnit. 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "basic line graph",
  "data": {
    "values": [
        {"date":"2017-08-15", "dayName":"Tue","item":"foo","count":"0"},
        {"date":"2017-08-16", "dayName":"Wed","item":"foo","count":"11"},
        {"date":"2017-08-17", "dayName":"Thu","item":"foo","count":"7"},
        {"date":"2017-08-18", "dayName":"Fri","item":"foo","count":"28"},
        {"date":"2017-08-19", "dayName":"Sat","item":"foo","count":"0"},
        {"date":"2017-08-20", "dayName":"Sun","item":"foo","count":"0"},
        {"date":"2017-08-21", "dayName":"Mon","item":"foo","count":"0"}
    ]},
  "mark": {
    "type": "line",
    "interpolate": "monotone"
  },
  "encoding": {
    "x": {
      "timeUnit": "day",
      "field": "date", 
      "type": "temporal"
    },
    "y": {"field": "count", "type": "quantitative"}
  }
}

If you want to customize the label format, you can add axis format, as well

Upvotes: 0

Related Questions