title: how to use spannable vertical axes for bar chart in VEGA(only) not vegalite? pls copy below code in vega editor
body: <p>while working on VEGA charts in my recent react project, I m facing difficulty in adding scrollbar/spanning to the charts!</p>
  <ul>
  <li>pls note its VEGA and not VEGA-LITE.</li>
  <li>need to act on vertical axis only</li>
  <li>change the axis if possible</li>
  <li>clearly it should be scrollable for larger data entry to be
  fitted in the frame.</li>
  <li>follow link to editor <a href="https://vega.github.io/editor/#/" rel="nofollow noreferrer">https://vega.github.io/editor/#/</a>  and copy code below :</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "$schema": "https://vega.github.io/schema/vega/v4.json",
    "width": 400,
    "height": 200,
    "padding": 5,
  
    "signals":[
      
      {
        "name": "down", "value": null,
        "on": [
          {"events": "touchend", "update": "null"},
          {"events": "mousedown, touchstart", "update": "xy()"}
        ]
      },
      {
        "name": "ycur", "value": null,
        "on": [
          {
            "events": "mousedown, touchstart, touchend",
            "update": "slice(ydom)"
          }
        ]
      },
      {
        "name": "delta", "value": [0, 0],
        "on": [
          {
            "events": [
              {
                "source": "window", "type": "mousemove", "consume": true,
                "between": [{"type": "mousedown"}, {"source": "window", "type": "mouseup"}]
              },
              {
                "type": "touchmove", "consume": true,
                "filter": "event.touches.length === 1"
              }
            ],
            "update": "down ? [down[0]-x(), y()-down[1]] : [0,0]"
          }
        ]
      },
      {
        "name": "dist1", "value": 0,
        "on": [
          {
            "events": {"type": "touchstart", "filter": "event.touches.length===2"},
            "update": "pinchDistance(event)"
          },
          {
            "events": {"signal": "dist2"},
            "update": "dist2"
          }
        ]
      },
      {
        "name": "dist2", "value": 0,
        "on": [{
          "events": {"type": "touchmove", "consume": true, "filter": "event.touches.length===2"},
          "update": "pinchDistance(event)"
        }]
      },
      {
        "name": "ydom", "update": "slice(yext)",
        "on": [
          {
            "events": {"signal": "delta"},
            "update": "[ycur[0] + span(ycur) * delta[1] / height, ycur[1] + span(ycur) * delta[1] / height]"
          }
        ]
      }
  
    ],
   
    "data": [
      {
        "name": "table",
        "values": [
          {"category": "A", "amount": 28},
          {"category": "B", "amount": 55},
          {"category": "C", "amount": 43},
          {"category": "D", "amount": 91},
          {"category": "E", "amount": 81},
          {"category": "F", "amount": 53},
          {"category": "G", "amount": 19},
          {"category": "H", "amount": 87},
          {"category": "I", "amount": 28},
          {"category": "J", "amount": 55},
          {"category": "K", "amount": 43},
          {"category": "L", "amount": 91},
          {"category": "M", "amount": 81},
          {"category": "N", "amount": 53},
          {"category": "O", "amount": 19},
          {"category": "P", "amount": 87},
          {"category": "Q", "amount": 28},
          {"category": "R", "amount": 55},
          {"category": "S", "amount": 43},
          {"category": "T", "amount": 91},
          {"category": "U", "amount": 81},
          {"category": "V", "amount": 53},
          {"category": "W", "amount": 19},
          {"category": "X", "amount": 87},
          {"category": "Y", "amount": 87},
          {"category": "Z", "amount": 87},
          {"category": "AA", "amount": 28},
          {"category": "AB", "amount": 55},
          {"category": "AC", "amount": 43},
          {"category": "AD", "amount": 91},
          {"category": "AE", "amount": 81},
          {"category": "AF", "amount": 53},
          {"category": "AG", "amount": 19},
          {"category": "AH", "amount": 87},
          {"category": "AI", "amount": 28},
          {"category": "AJ", "amount": 55},
          {"category": "AK", "amount": 43},
          {"category": "AL", "amount": 91},
          {"category": "AM", "amount": 81},
          {"category": "AN", "amount": 53},
          {"category": "AO", "amount": 19},
          {"category": "AP", "amount": 87},
          {"category": "AQ", "amount": 28},
          {"category": "AR", "amount": 55},
          {"category": "AS", "amount": 43},
          {"category": "AT", "amount": 91},
          {"category": "AU", "amount": 81},
          {"category": "AV", "amount": 53},
          {"category": "AW", "amount": 19},
          {"category": "AX", "amount": 87},
          {"category": "AY", "amount": 87},
          {"category": "AZ", "amount": 87}
        ],
        "transform": [
          { "type": "extent", "field": "amount", "signal": "yext" }
        ]
      }],
    "scales": [
      {
        "name": "xscale",
        "type": "band",
        "domain": {"data": "table", "field": "category"},
         "range": "width",
        "padding": 0.5,
        "round": true
      },
      {
        "name": "yscale", "zero": false,
        "domain": {"signal": "ydom"},
         "nice": true,
        "range": "height"
      }
    ],
    "axes": [
     {
        "scale": "xscale",
        "orient": "bottom"
      },
      {
        "scale": "yscale",
        "orient": "left"
      }
    ],
    "marks": [
      {
        "type": "rect",
        "from": {"data":"table"},
         "clip": true,
        "encode": {
          "enter": {
            "x": {"scale": "xscale", "field": "category"},
            "width": {"scale": "xscale", "band": 1.5},
            "y": {"scale": "yscale", "field": "amount"},
            "y2": {"scale": "yscale", "value": 1}
          },
          "update": {
            "fill": {"value": "steelblue"}
          },
          "hover": {
            "fill": {"value": "red"}
          }
        }
      }
    ]
  }</code></pre>
  </div>
  </div>
  </p>