vertical line(boundary) issue in vegalite charts

50 Views Asked by At

I create vertical line(boundary) in chart at any point of data provided by the user example link of vertical line specs

now, I tried to put the value in encoding.x.dataum in such way that vertical line got disappear example in this i put empty string but it is still making vertical line editor link .
Please help me by providing such a value to put in encoding.x.dataum such that the line will not show but the layer exists. Thanks in advance

2

There are 2 best solutions below

1
APB Reports On BEST ANSWER

You could also do it like this:

Change the transform filter for a date you want or set it to null if you want it hidden.

But setting x.datum will not work.

{
  "data": {
    "values": [
      {"Calendar": "200901", "Del": 2502},
      {"Calendar": "200902", "Del": 2481},
      {"Calendar": "200903", "Del": 2764},
      {"Calendar": "200904", "Del": 2666},
      {"Calendar": "200905", "Del": 3044},
      {"Calendar": "200906", "Del": 3307},
      {"Calendar": "200907", "Del": 3375},
      {"Calendar": "200908", "Del": 3044},
      {"Calendar": "200909", "Del": 2473},
      {"Calendar": "200910", "Del": 3201},
      {"Calendar": "200911", "Del": 2351},
      {"Calendar": "200912", "Del": 2703}
    ]
  },
  
  "vconcat": [
    {
      "encoding": {"x": {"field": "Calendar", "type": "nominal"}},
      "layer": [
        {
          "encoding": {"y": {"field": "Del", "type": "quantitative"}},
          "mark": {"tooltip": true, "type": "line"}
        },
        {
          "transform":  [{"filter": "datum.Calendar == 200910"}],
          "mark": {"tooltip": true, "type": "rule", "color": "red"}
        }
      ]
    }
  ]
}
2
APB Reports On

If you want your line to "disappear" then you could just set the color to transparent. "color": "transparent"

{
"encoding": {"x": {"datum": "200907"}, "y": {}},
"mark": {"tooltip": true, "type": "rule", "color": "transparent"}         
}
{
  "data": {
    "values": [
      {"Calendar": "200901", "Del": 2502},
      {"Calendar": "200902", "Del": 2481},
      {"Calendar": "200903", "Del": 2764},
      {"Calendar": "200904", "Del": 2666},
      {"Calendar": "200905", "Del": 3044},
      {"Calendar": "200906", "Del": 3307},
      {"Calendar": "200907", "Del": 3375},
      {"Calendar": "200908", "Del": 3044},
      {"Calendar": "200909", "Del": 2473},
      {"Calendar": "200910", "Del": 3201},
      {"Calendar": "200911", "Del": 2351},
      {"Calendar": "200912", "Del": 2703}
    ]
  },
  "vconcat": [
    {
      "encoding": {"x": {"field": "Calendar", "type": "nominal"}},
      "layer": [
        {
          "encoding": {"y": {"field": "Del", "type": "quantitative"}},
          "mark": {"tooltip": true, "type": "line"}
        },
        {
          "encoding": {"x": {"datum": "200907"}, "y": {}},
          "mark": {"tooltip": true, "type": "rule", "color": "transparent"}
        }
      ]
    }
  ]
}