Search code examples
jsonpowerbilinechartvega-litedeneb

Conditional tick mark removal?

Can tick marks be removed where there is no label in deneb?

We also want to keep the max amount of gridlines possible.

Before
Before

After
After

I tried using the conditional labels/located in the documentation, but could not get my expression to respect the labels in the chart above.

Solution

  • Here is an example which shows a possible solution for you. I divide value by 10 and round it to 0 decimal. If it still equals itself divided by 10 then we color tick otherwise we set it as transparent.

    We don't want to change tickSize because then the values will be misaligned.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "height": {"step": 17},
  "encoding": {
    "y": {
      "field": "age",
      "axis": {
        "tickSize": 8,
        "tickColor": {
          "expr": "round((datum.value/10),0) == (datum.value/10) ? 'black':'transparent'"
        }
      }
    }
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "population",
          "stack": "normalize"
        },
        "color": {"field": "gender", "scale": {"range": ["#675193", "#ca8861"]}}
      }
    },
    {
      "mark": {"type": "text", "opacity": 0.9, "color": "white"},
      "encoding": {
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "population",
          "stack": "normalize",
          "bandPosition": 0.5
        },
        "text": {"aggregate": "sum", "field": "people", "title": "population"},
        "detail": {"field": "gender"}
      }
    }
  ]
}