vega-sample.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "data": [
    {
      "name": "table",
      "values": [
        {"name": "A", "current": 28, "upper": 80, "lower": 20},
        {"name": "B", "current": 55, "upper": 70, "lower": 30},
        {"name": "C", "current": 43, "upper": 60, "lower": 20},
        {"name": "D", "current": 91, "upper": 110, "lower": 50},
        {"name": "E", "current": 81, "upper": 90, "lower": 30}
      ]
    }
  ],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout", "update": "{}"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "name"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "current"},
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "name"},
          "y": {"scale": "yscale", "field": "upper"},
          "width": {"scale": "xscale", "band": 1},
          "height": {"value": 2},
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "name"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "current"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "#48F"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "name"},
          "y": {"scale": "yscale", "field": "lower"},
          "width": {"scale": "xscale", "band": 1},
          "height": {"value": 2},
          "fill": {"value": "#008"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        }
      }
    }
  ]
}