Search code examples
data-visualizationvega-litevega

What is this part of the chart called in Vega-Lite?


I'm trying to get rid of the right side of the box of a chart in Vega-Lite. I assume I can just set the color to white once I figure out what it's called. It's not the domain or the grid, what is it? For bonus points, what do I need to do to make it go away? Thanks.

Picture of the chart with a part in question circled in red


Solution

  • The line which you have highlighted is called stroke, you will find it in view config as it is a part of your chart view and provide the value as white or transparent.

    Refer the below snippet or editor reference:

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "Google's stock price over time.",
      "data": {"url": "data/stocks.csv"},
      "transform": [{"filter": "datum.symbol==='GOOG'"}],
      "mark": "line",
      "config": {"view": {"stroke": "transparent"}},
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"grid": false}},
        "y": {"field": "price", "type": "quantitative", "axis": {"domain": false}}
      }
    }