Highlight/bold label on vega chart axis

Question

Is it possible to highlight certain labels on an axis?

My current encoding is:

"encoding": {
       "x": { "field": "date", "type": "temporal", "axis": { "title": "Date", "grid": false } },
       "y": { "field": "value", "type": "quantitative", "axis": { "format": "d" } 
 }

And I would like the days of the month (as opposed to the times) to be highlighted/bold so that they easily stand out. Would also like all of these day labels to include the month, rather than the day of the week, so instead of 'Mon 07' I get want 'Oct 07' as it is for 'Oct 06'. Is this possible?

Answer 1

You cannot change the font style conditioned on the label value, but you can use axis.labelExpr to change the value of the label depending on a condition.

The Line Chart With Conditional Axis Properties example in the Vega-Lite documentation shows one possible approach that is relevant to your question.

Here is an example of what you might do specifically for multi-day hourly data like yours (editor):

{
  "mark": "line",
  "encoding": {
    "x": {
      "type": "temporal",
      "field": "x",
      "axis": {
        "tickCount": 12,
        "labelAlign": "left",
        "labelOffset": 2,
        "labelExpr": "[timeFormat(datum.value, '%H:%M'), timeFormat(datum.value, '%H') == '00' ? timeFormat(datum.value, '%b %d') : '']"
      }
    },
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 800,
  "data": {
    "values": [
      {"x": "2020-01-01T00:00:00", "y": -0.29},
      {"x": "2020-01-01T02:00:00", "y": -0.59},
      {"x": "2020-01-01T04:00:00", "y": 0.12},
      {"x": "2020-01-01T06:00:00", "y": -0.24},
      {"x": "2020-01-01T08:00:00", "y": -0.34},
      {"x": "2020-01-01T10:00:00", "y": -0.55},
      {"x": "2020-01-01T12:00:00", "y": -0.02},
      {"x": "2020-01-01T14:00:00", "y": 0.66},
      {"x": "2020-01-01T16:00:00", "y": 1.51},
      {"x": "2020-01-01T18:00:00", "y": 0.98},
      {"x": "2020-01-01T20:00:00", "y": 0.06},
      {"x": "2020-01-01T22:00:00", "y": 0.31},
      {"x": "2020-01-02T00:00:00", "y": 0.42},
      {"x": "2020-01-02T02:00:00", "y": 0.56},
      {"x": "2020-01-02T04:00:00", "y": 1.05},
      {"x": "2020-01-02T06:00:00", "y": 1.1},
      {"x": "2020-01-02T08:00:00", "y": 1.93},
      {"x": "2020-01-02T10:00:00", "y": 2.12},
      {"x": "2020-01-02T12:00:00", "y": 1.41},
      {"x": "2020-01-02T14:00:00", "y": 2.22},
      {"x": "2020-01-02T16:00:00", "y": 2.99},
      {"x": "2020-01-02T18:00:00", "y": 3.51},
      {"x": "2020-01-02T20:00:00", "y": 4.02},
      {"x": "2020-01-02T22:00:00", "y": 1.92},
      {"x": "2020-01-03T00:00:00", "y": 2.05},
      {"x": "2020-01-03T02:00:00", "y": 2.19},
      {"x": "2020-01-03T04:00:00", "y": 2.28},
      {"x": "2020-01-03T06:00:00", "y": 3.15},
      {"x": "2020-01-03T08:00:00", "y": 2.8},
      {"x": "2020-01-03T10:00:00", "y": 2.66},
      {"x": "2020-01-03T12:00:00", "y": 3.16},
      {"x": "2020-01-03T14:00:00", "y": 3.28},
      {"x": "2020-01-03T16:00:00", "y": 3.06},
      {"x": "2020-01-03T18:00:00", "y": 2.63},
      {"x": "2020-01-03T20:00:00", "y": 1.53},
      {"x": "2020-01-03T22:00:00", "y": 1.16},
      {"x": "2020-01-04T00:00:00", "y": 1.45},
      {"x": "2020-01-04T02:00:00", "y": -0.51},
      {"x": "2020-01-04T04:00:00", "y": -1.04},
      {"x": "2020-01-04T06:00:00", "y": -1.95},
      {"x": "2020-01-04T08:00:00", "y": -2.57},
      {"x": "2020-01-04T10:00:00", "y": -2.65},
      {"x": "2020-01-04T12:00:00", "y": -3.39},
      {"x": "2020-01-04T14:00:00", "y": -3.296},
      {"x": "2020-01-04T16:00:00", "y": -2.45},
      {"x": "2020-01-04T18:00:00", "y": -2.44},
      {"x": "2020-01-04T20:00:00", "y": -2.14},
      {"x": "2020-01-04T22:00:00", "y": -0.82},
      {"x": "2020-01-05T00:00:00", "y": 0.3},
      {"x": "2020-01-05T02:00:00", "y": 1.04}
    ]
  }
}