Rescale Chart in Vega-Lite

Question

We have this dataset which we want to visualize with Vega/Vega-Lite

{
   "$schema":"https://vega.github.io/schema/vega-lite/v4.13.json",
   "description":"Testing",
   "width":"container",
   "height":350,
   "autosize":{
      "type":"fit",
      "contains":"padding"
   
},
   "layer":[
      {
         "data":{
            "values":[
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444444",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45466
               
},
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444445",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45433
               
},
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444446",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45400
               
},
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444447",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45422
               
},
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444448",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45403
               
},
               {
                  "stepid":"4444",
                  "stepname":"Name1",
                  "serialnumber":"SN3444449",
                  "lowval":45000,
                  "highval":45500,
                  "resultdecimal":45422
               
}
            
]
         
},
         "layer":[
            {
               "mark":{
                  "type":"line",
                  "strokeWidth":3,
                  "point":{
                     "size":45,
                     "filled":true
                  
},
                  "interpolate":"monotone"
               
},
               "encoding":{
                  "x":{
                     "field":"serialnumber",
                     "type":"ordinal",
                     "axis":{
                        "labelAngle":-70,
                        "title":"Selected Tests",
                        "titleFontSize":10
                     
}
                  
},
                  "y":{
                     "field":"resultdecimal",
                     "type":"quantitative",
                     "axis":{
                        "title":"Teststeps in selected Tests",
                        "titleFontSize":10
                     
}
                  
},
                  "tooltip":[
                     {
                        "field":"serialnumber",
                        "type":"ordinal"
                     
},
                     {
                        "field":"resultdecimal",
                        "type":"quantitative"
                     
}
                  
]
               
}
            
},
            {
               "mark":"rule",
               "encoding":{
                  "y":{
                     "field":"highval"
                  
},
                  "stroke":{
                     "value":"#FF0000"
                  
}
               
}
            
},
            {
               "mark":"rule",
               "encoding":{
                  "y":{
                     "field":"lowval"
                  
},
                  "stroke":{
                     "value":"#FF0000"
                  
}
               
}
            
}
         
]
      
}
   
]
}

Everything works fine but the scaling on the y-axis is not too optimal

Is it possible to rescale y-axis so it is more scaled-into-view based on lowval and highval eg like this one?

Furthermore is it possible to write the "lowval" and "highval" values on top of the lines?

Answer 1

You can control the y-axis domain using the scale.domain property:

"y": {
  "field": "resultdecimal",
  "type": "quantitative",
  "axis": {
    "title": "Teststeps in selected Tests",
    "titleFontSize": 10
  },
  "scale": {
    "domain": [45000, 45500]
  }
},

Adding that to your chart, results in this ( view in editor ):