CODEWITHSUNDEEP
vega-lite
zylatis
zylatis

Reputation: 478

Remove minor ticks in Vega Lite date x-axis

I have the following Vega Lite spec

{
  "config": {
    "view": {"stroke": "transparent"},
    "mark": {"tooltip": null},
    "axis": {
      "grid": false,

      "labelAngle": 0,
      "labelFont": "museo-sans-300",
      "labelFontSize": 15,
      "labelFontWeight": "normal",
      "titleFont": "museo-sans-300",
      "titleFontSize": 15,
      "titleFontWeight": "normal"
    }
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"name": "data"},
  "mark": {
    "type": "line",
    "interpolate": "monotone",
    "point": {"filled": false, "fill": "white"}
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "timeUnit": "monthdate",
      "axis": {"title": null,"tickMinStep": 1}
    },
    "y": {"type": "quantitative", "field":"%"},
    "color": {
      "field": "metric",
      "type": "nominal",
      "legend": {
        "labelFont": "museo-sans-300",
        "labelFontSize": 15,
        "title": null,
        "offset": 0,
        "padding": 0
      }
    }
  },
  "width": 500,
  "datasets": {
    "data": [
      {
        "date": "2019-11-28",
        "metric": "linehaul_util_perc",
        "%": 48.36678571428571
      },
      {
        "date": "2019-11-29",
        "metric": "linehaul_util_perc",
        "%": 57.74388888888889
      },
      {"date": "2019-12-03", "metric": "linehaul_util_perc", "%": 57.25},
      {
        "date": "2019-12-04",
        "metric": "linehaul_util_perc",
        "%": 71.37883720930233
      },
      {"date": "2019-11-28", "metric": "recovery_perc", "%": 62.7},
      {"date": "2019-11-29", "metric": "recovery_perc", "%": 63.1},
      {"date": "2019-12-02", "metric": "recovery_perc", "%": 126.1},
      {"date": "2019-12-03", "metric": "recovery_perc", "%": 80.4},
      {"date": "2019-12-04", "metric": "recovery_perc", "%": 60.4},
      {"date": "2019-11-28", "metric": "rolling_recovery", "%": 73.9},
      {"date": "2019-11-29", "metric": "rolling_recovery", "%": 73.3},
      {"date": "2019-11-30", "metric": "rolling_recovery", "%": 71.5},
      {"date": "2019-12-01", "metric": "rolling_recovery", "%": 72.2},
      {"date": "2019-12-02", "metric": "rolling_recovery", "%": 76.5},
      {"date": "2019-12-03", "metric": "rolling_recovery", "%": 76.6},
      {"date": "2019-12-04", "metric": "rolling_recovery", "%": 75.5}
    ]
  }
}

Which produces the following image

enter image description here

which is correct except that I only want ticks to show on the days with text (i.e. major ticks). Setting min tick distance to 1 didn't seem to work, although I am able to change this with tickCount. However this would require a bit of extra logic to first determine the number of days in the set, so it would be great to be able to do it without that.

Upvotes: 1

Views: 842

Answers (1)

zylatis
zylatis

Reputation: 478

As it turns out I just did not read the docs closely enough. This problem can be solved using tickCount because it can take 'day' as an argument, which is what I require.

Upvotes: 2

Related Questions