Home Vega Lite – can I anchor a horizontal line with only values of 0 to the bottom of the chart instead of the middle?

Questions

Vega Lite – can I anchor a horizontal line with only values of 0 to the bottom of the chart instead of the middle?

July 27, 2022

I’m trying to get a chart to look nicer in Vega-Lite. If I have multiple points all at a value of 0 the line is centered in the chart.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {
    "values": [
      { "date": "2022-07-27 4:20", "value": 0 },
      { "date": "2022-07-27 4:21", "value": 0 },
      { "date": "2022-07-27 4:22", "value": 0 },
      { "date": "2022-07-27 4:23", "value": 0 },
      { "date": "2022-07-27 4:24", "value": 0 },
      { "date": "2022-07-27 4:25", "value": 0 },
      { "date": "2022-07-27 4:26", "value": 0 },
      { "date": "2022-07-27 4:27", "value": 0 },
      { "date": "2022-07-27 4:28", "value": 0 },
      { "date": "2022-07-27 4:29", "value": 0 },
      { "date": "2022-07-27 4:30", "value": 0 },
      { "date": "2022-07-27 4:31", "value": 0 },
      { "date": "2022-07-27 4:32", "value": 0 },
      { "date": "2022-07-27 4:33", "value": 0 },
      { "date": "2022-07-27 4:34", "value": 0 },
      { "date": "2022-07-27 4:35", "value": 0 },
      { "date": "2022-07-27 4:36", "value": 0 },
      { "date": "2022-07-27 4:37", "value": 0 },
      { "date": "2022-07-27 4:38", "value": 0 },
      { "date": "2022-07-27 4:39", "value": 0 }
    ]
  },

  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },

    "y": {
      "field": "value",
      "type": "quantitative"
    }
  },

  "mark": {
    "type": "line"
  }

}

Is there a way to get the line to be anchored to the bottom instead?

>Solution :

Set a domain.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {
    "values": [
      { "date": "2022-07-27 4:20", "value": 0 },
      { "date": "2022-07-27 4:21", "value": 0 },
      { "date": "2022-07-27 4:22", "value": 0 },
      { "date": "2022-07-27 4:23", "value": 0 },
      { "date": "2022-07-27 4:24", "value": 0 },
      { "date": "2022-07-27 4:25", "value": 0 },
      { "date": "2022-07-27 4:26", "value": 0 },
      { "date": "2022-07-27 4:27", "value": 0 },
      { "date": "2022-07-27 4:28", "value": 0 },
      { "date": "2022-07-27 4:29", "value": 0 },
      { "date": "2022-07-27 4:30", "value": 0 },
      { "date": "2022-07-27 4:31", "value": 0 },
      { "date": "2022-07-27 4:32", "value": 0 },
      { "date": "2022-07-27 4:33", "value": 0 },
      { "date": "2022-07-27 4:34", "value": 0 },
      { "date": "2022-07-27 4:35", "value": 0 },
      { "date": "2022-07-27 4:36", "value": 0 },
      { "date": "2022-07-27 4:37", "value": 0 },
      { "date": "2022-07-27 4:38", "value": 0 },
      { "date": "2022-07-27 4:39", "value": 0 }
    ]
  },

  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },

    "y": {
      "field": "value", "scale":{"domain":[0,1]},
      "type": "quantitative"
    }
  },

  "mark": {
    "type": "line"
  }

}