Search code examples
powerbivisualizationvega-litevegadeneb

Conditional X-axis short month labeling (Jan, Feb etc.)


In Deneb vega-lite for Power BI, I have ran into an issue where my data for a certain segment of data is not labeled as the beginning of the month (04/01) is not shown, due to the nature of this specific data.

However, I am wanting to keep the nature of the tick marks the same (start at the beginning of the month) with the label appearing on/in the middle of the month (the 15th).

I tried doing something like this label expression in this example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2024-04-15T00:00:00Z", "value": 10},
      {"date": "2024-05-15T00:00:00Z", "value": 20},
      {"date": "2024-06-15T00:00:00Z", "value": 15},
      {"date": "2024-07-15T00:00:00Z", "value": 18},
      {"date": "2024-08-15T00:00:00Z", "value": 25},
      {"date": "2024-09-15T00:00:00Z", "value": 22},
      {"date": "2024-10-15T00:00:00Z", "value": 19},
      {"date": "2024-11-15T00:00:00Z", "value": 16},
      {"date": "2024-12-15T00:00:00Z", "value": 23},
      {"date": "2025-01-15T00:00:00Z", "value": 28},
      {"date": "2025-02-15T00:00:00Z", "value": 30},
      {"date": "2025-03-15T00:00:00Z", "value": 25}
    ]
  },
  "width": "container",
  "height": "container",
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "title": "Date",
      "axis": {
        "labelExpr": "if(day(datum.value) === 15, timeFormat(datum.value, '%b'), null)"
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "Value"
    }
  }
}

But I could not successfully get a label to appear.

Here is a screenshot of the original data I am working with: SS


Solution

  • Is this what you're looking for?

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"date": "2024-04-15T00:00:00Z", "value": 10},
          {"date": "2024-05-15T00:00:00Z", "value": 20},
          {"date": "2024-06-15T00:00:00Z", "value": 15},
          {"date": "2024-07-15T00:00:00Z", "value": 18},
          {"date": "2024-08-15T00:00:00Z", "value": 25},
          {"date": "2024-09-15T00:00:00Z", "value": 22},
          {"date": "2024-10-15T00:00:00Z", "value": 19},
          {"date": "2024-11-15T00:00:00Z", "value": 16},
          {"date": "2024-12-15T00:00:00Z", "value": 23},
          {"date": "2025-01-15T00:00:00Z", "value": 28},
          {"date": "2025-02-15T00:00:00Z", "value": 30},
          {"date": "2025-03-15T00:00:00Z", "value": 25}
        ]
      },
      "width": "container",
      "height": "container",
      "mark": "line",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "title": "Date",
          "axis": {
            "tickCount": "day",
            "labelExpr": "date(datum.value) == 15? timeFormat(datum.value, '%b'): null",
            "gridOpacity":{"expr": "date(datum.value) == 15? 1: 0"},
            "tickOpacity":{"expr": "date(datum.value) == 15? 1: 0"}
          }
        },
        "y": {"field": "value", "type": "quantitative", "title": "Value"}
      }
    }