Difficulty With Legends on Multi-line Charts

Community Help
1

I want to add a categorical swatch color legend to this schema. The legend should have “AAPL” and “AMZN” labels with “blue” and “green” colors to match the colors of the time-series. Ideally, I don’t want to require access to a “Category” column for the “stroke” attribute that differentiates between the lines because the data isn’t guaranteed to have such a column.

The documentation around legends is confusing to me. What should be added to this observable schema to get a correct swatch legend for multi-line line charts?

{
  "title": {
    "text": "AAPL and AMZN Stock Close Prices Over Time",
    "style": {
      "color": "#808080",
      "fontSize": "25px",
      "lineHeight": "1",
      "padding": "10px",
      "textAlign": "center"
    }
  },
  "subtitle": {
    "text": "Tracking the closing prices of AAPL and AMZN stocks from 1997 to 2024",
    "style": {
      "color": "#8f8f8f",
      "lineHeight": "1",
      "padding": "10px",
      "textAlign": "center"
    }
  },
  "caption": {
    "text": "Data source: Stock market historical data",
    "style": {
      "color": "#8f8f8f",
      "fontSize": "10px",
      "padding": "10px",
      "textAlign": "right"
    }
  },
  "plotOptions": {
    "inset": 10,
    "x": {
      "axis": "bottom",
      "label": "Date"
    },
    "y": {
      "axis": "left",
      "label": "Stock Close Price"
    },
    "color": {
      "legend": true
    }
  },
  "marks": [
    {
      "method": "line",
      "data": 0,
      "options": {
        "x": "date",
        "y": "aapl.stock.close.price",
        "stroke": "blue",
        "tip": true
      }
    },
    {
      "method": "line",
      "data": 0,
      "options": {
        "x": "date",
        "y": "amzn.stock.close.price",
        "stroke": "green",
        "tip": true
      }
    }
  ]
}
2

What software are you using? The code you’re sharing is definitely not following the Observable Plot syntax, so it’s hard to tell what’s happening. For questions about Observable Plot, please open a new discussion on observablehq/plot Q A · Discussions · GitHub