How can I remove Axis Lines from Vega Lite Chart
Asked Answered
E

1

5

I'd like to remove / hide the axis lines from the vega-lite chart below. I've tried changing the colour to null (as below) or other colours and that doesn't work.

https://vega.github.io/editor/#/gist/fc799bc9f7a8f28b8f1f2ec84673e965/VL with axis lines.json

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"responseType": "Yes", "proportion": 28},
      {"responseType": "No", "proportion": 7}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "responseType",
      "type": "nominal",
      "title": null,
      "axis": {"axisColor": null, "grid": false, "ticks": false}
    },
    "x": {
      "field": "proportion",
      "type": "quantitative",
      "title": "% of Responses",
      "axis": {"axisWidth": "100", "grid": false, "ticks": false}
    }
  }
}
Emolument answered 1/4, 2022 at 14:58 Comment(0)
S
6

domain hides the axis lines, so setting "axis": {"domain": false, "grid": false, "ticks": false} for both x and y produces this chart:

enter image description here

If you also add "config": {"view": {"stroke": null}} as a top level property, you get rid of the grey outline:

enter image description here

Open the Chart in the Vega Editor

Shaughn answered 1/4, 2022 at 16:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.