Sorting problem ( distortion ) of area chart in VegaLite

Question

I create area chart and add a custom scroller using vconcat composition,vconcat[0] is main chart and vconcat1 is for dummy scroller Issue is that when i drag on scroller (vconcat1) for scroll and single click on the same (scroller) then chart get distorted. I am using sort by id to maintain the sorting on x axis And if i set sort to null then x-axis label sort get wrong (not in order as expected)

Editor link--vega Editor

I want chart not distorted on using scroller(when i drag on scroller and double/single click on the same sroller then chart look same as previous without drag on scroller) and x axis label maintain a sorting order.

Answer 1

Does this do what you want?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Count": 210.64, "month": "Jan-21", "name": "DRC"},
      {"Count": 179.95, "month": "Feb-21", "name": "WER"},
      {"Count": 155.48, "month": "Mar-21", "name": "GHJ"},
      {"Count": 230.72, "month": "Apr-21", "name": "THE"},
      {"Count": 167.27, "month": "May-21", "name": "JUY"},
      {"Count": 35.02, "month": "Jun-21", "name": "EDC"},
      {"Count": 234.97, "month": "Jul-21", "name": "QSD"},
      {"Count": 176.2, "month": "Aug-21", "name": "AXC"},
      {"Count": 163.84, "month": "Sep-21", "name": "FDS"},
      {"Count": 191.01, "month": "Oct-21", "name": "ASD"},
      {"Count": 182.99, "month": "Nov-21", "name": "THN"},
      {"Count": 119.79, "month": "Dec-21", "name": "RFV"},
      {"Count": 124.74, "month": "Jan-22", "name": "WSX"},
      {"Count": 241.88, "month": "Feb-22", "name": "QSA"},
      {"Count": 163.01, "month": "Mar-22", "name": "KOI"},
      {"Count": 137.3, "month": "Apr-22", "name": "YHN"},
      {"Count": 0, "month": "May-22", "name": "YHJ"},
      {"Count": 160.51, "month": "Jun-22", "name": "KLO"}
    ]
  },
  "description": "Google's stock price over time.",
  "vconcat": [
    {
      "height": 250,
      "layer": [
        {
          "encoding": {
            "x": {"field": "month", "type": "nominal"},
            "y": {
              "field": "Count",
              "scale": {"zero": false},
              "type": "quantitative"
            }, "order":{"sort": "ascending", "field":"id"}
          },
          "mark": {"line": true, "point": true, "tooltip": true, "type": "area"}
        }
      ],
      "transform": [{"filter": {"param": "brush"}}],
      "width": "container"
    },
    {
      "encoding": {
        "color": {"value": "lightGray"},
        "x": {
          "axis": {"labels": false, "ticks": false, "title": null},
          "field": "month",
          "sort": null,
          "type": "nominal"
        }
      },
      "height": 40,
      "mark": {"opacity": 0, "type": "area"},
      "params": [
        {
          "name": "brush",
          "select": {"encodings": ["x"], "translate": true, "type": "interval"}
        }
      ],
      "width": "container"
    }
  ]
}