Interactive Index Chart with fixed starting point

Community Help
1

Hi Everyone!

Building on “Vega-Lite Interactive Index Chart” example, I am trying to create a chart using “brush” selection on upper (sub) chart to interactively scale X axis on lower (main) chart. But, I would like to fix the starting point for indexing at the start date of the lower (main) chart, instead of being able to move around with the mouseover.

Here is my code.

chartIndex = {
  const mouseover = vl
    .selectSingle("index")
    .on("mouseover")
    .encodings("x")
    .nearest(true)
    .init({ x: { year: 2005, month: 1, date: 1 } });

  const base = vl.mark().encode(
    vl.x().fieldT("date").axis(null)
  );

  const hiddenPoints = base.markPoint({ opacity: 0 }).select(mouseover);
  
  const lineMain = base
    .markLine()
    .transform(
      vl.lookup("symbol").from(mouseover.key("symbol")),
      vl.calculate(
        "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
      ).as("indexed_price")
    )
    .encode(
     vl.x({'field':'date','type': 'temporal','title':'Date'}).scale({"domain": {"param": "brush"}}),

      vl.y().fieldQ("indexed_price").axis({ format: "%" }),
      vl.color().fieldN("symbol")
    );
  
  const lineSub = base
    .markLine()
    .transform(
      vl.filter({'field':'symbol','equal':'MSFT'})
      )
    .encode(
      vl.y().fieldQ("price"),
      vl.color().fieldN("symbol"),
      vl.opacity().value(0.5)
    )
    .params([{
          "name": "brush",
          "select": {"type": "interval", "encodings": ["x"]}
            }]);

  const tooltipBase = base
    .transform(vl.filter(mouseover))
    .encode(vl.color().value("firebrick"));

  const tooltip = vl.layer(
    tooltipBase.markRule({ strokeWidth: 0.5 }),
    tooltipBase.markText({ align: "center", fontWeight: 100 }).encode(
      vl.y().value(310),
      vl.text().fieldT("date").timeUnit("yearmonth")
    )
  );

  const chartMain = vl
    .layer(hiddenPoints, lineMain, tooltip)
    .encode(
       vl.x().scale({"domain": {"param": "brush"}}),    
    )
    .data("data/stocks.csv")
    .width(width - 150)
    .height(300);

  const chartSub = lineSub
    .data("data/stocks.csv")
    .width(width - 150)
    .height(50);
  
  return vl.vconcat(chartSub, chartMain)
    .render();
}

Here is my notebook so far.
https://observablehq.com/d/8b374bc6e881c6e9

“Vega-Lite Interactive Index Chart”
https://observablehq.com/@vega/vega-lite-interactive-index-chart?collection=@vega/vega-lite-api

I have tried changing the below part with no luck…

      vl.calculate(
        "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
      ).as("indexed_price")

This is the result I want (with no vertical red line).

index_price_chart
index_price_chart854×409 27.2 KB

Thank you very much for your help!!