CODEWITHSUNDEEP
vega-lite
soejens
soejens

Reputation: 21

Minimum value for y-axis in Vega lite

I have a line chart with stock ticks based on this examples: https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html

I'm trying to set a min. val. for the y-axis and have tried the below:

    "encoding": {
        "x": {
            "field": "date",
            "type": "temporal"
        },
        "y": {
            "field": "price",
            "type": "quantitative",
            "scale": {"domain": [150,350]},
        },
    },

This works with negative values like -150 but not positive. Also my tooltip disappears when setting the y variables..

Upvotes: 2

Views: 1949

Answers (1)

jakevdp
jakevdp

Reputation: 86453

Setting the scale domain appears to work with the example you linked to (editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "width": 400,
  "height": 300,
  "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "encoding": {
        "color": {"field": "symbol", "type": "nominal"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "scale": {"domain": [100, 500]}
        }
      },
      "layer": [
        {"mark": {"type": "line", "clip": true}},
        {
          "transform": [{"filter": {"selection": "hover"}}],
          "mark": {"type": "point", "clip": true}
        }
      ]
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "opacity": {
          "condition": {"value": 0.3, "selection": "hover"},
          "value": 0
        },
        "tooltip": [
          {"field": "AAPL", "type": "quantitative"},
          {"field": "AMZN", "type": "quantitative"},
          {"field": "GOOG", "type": "quantitative"},
          {"field": "IBM", "type": "quantitative"},
          {"field": "MSFT", "type": "quantitative"}
        ]
      },
      "selection": {
        "hover": {
          "type": "single",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "empty": "none",
          "clear": "mouseout"
        }
      }
    }
  ]
}

enter image description here

Note that I also set the clip mark property to hide marks outside the axis boundaries.

Upvotes: 1

Related Questions