CODEWITHSUNDEEP
javascriptvega-litevega
Chris
Chris

Reputation: 1475

How can I remove Axis Lines from Vega Lite Chart

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}
    }
  }
}

Upvotes: 5

Views: 3362

Answers (1)

joelostblom
joelostblom

Reputation: 48879

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

Upvotes: 6

Related Questions