line_graph_datalabels

line_graph_datalabels.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Multi-series line chart with labels and highest point markers.",
  "width": 400,
  "height": 300,
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol!=='IBM' && datum.symbol!=='GOOG'"}],
  "encoding": {
    "color": {
      "field": "symbol",
      "type": "nominal",
      "legend": null
    }
  },
  "layer": [
    {
      "mark": {"type": "line",
      "interpolate": "monotone",
      "tension": 1},
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "title": "date"
        },
        "y": {
          "field": "price",
          "type": "quantitative",
          "title": "price"
        }
      }
    },
    {
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "aggregate": {
            "argmax": "date"
          },
          "field": "price",
          "type": "quantitative"
        }
      },
      "layer": [
        {
          "mark": {
            "type": "circle"
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "left",
            "dx": 6
          },
          "encoding": {
            "text": {
              "field": "symbol",
              "type": "nominal"
            }
          }
        }
      ]
    },
    {
      "transform": [
        {
          "window": [
            {
              "op": "max",
              "field": "price",
              "as": "maxPrice"
            },
            {
              "op": "min",
              "field": "price",
              "as": "minPrice"
            }
          ],
          "frame": [null, null],
          "groupby": ["symbol"]
        },
        {
          "filter": "datum.price === datum.maxPrice || datum.price === datum.minPrice "
        }
      ],
      "layer": [
        {
          "mark": {
            "type": "point",
            "stroke": "black",
            "strokeWidth": 0.2,
            "shape": {"expr": "datum.price == datum.maxPrice ? 'triangle-down' : 'triangle-up'"},
            "filled": true,
            "opacity": 1,
            "size": 100,
            "yOffset": {"expr": "datum.price == datum.maxPrice ? -0 : 4"}
          }
        },
        {
          "mark": {
            "type": "text",
            "fontWeight": "bolder",
            "fontSize": 12,
            "align": "center",
            "baseline": "middle",
            "dx": 0,
            "dy": {"expr": "datum.price == datum.maxPrice ? -10 : 15"}
          },
          "encoding": {
            "text": {
              "field": "price",
              "type": "quantitative",
              "format": ".3~s"
              
            },
            "color": {
              "value": "black" // Optional: to ensure the text is visible regardless of the background.
            }
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "y": {
          "field": "price",
          "type": "quantitative"
        }
      }
    }
  ],
  "config": {
    "view": {
      "stroke": null
    }
  }
}