Highlighting or selecting all values from Legend

Question

Why when hovering over the bottom "legend" every time only one of the entries or the last one is highlighted. Is there a way to highlight or even better select all components which have same color ? Link

Answer 1

Please try this. I also added some opacity in case that was interesting. Remember to mark as closed if this solves your issue.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "id": "123",
        "a": "Wed, 09 Aug 2023 06:00:00 GMT",
        "b": "Wed, 09 Aug 2023 17:00:23 GMT",
        "c": "A1",
        "d": "B1",
        "start_time": "Sat, 30 Dec 1899 06:00:00 GMT",
        "Date": "Wed, 09 Aug 2023"
      },
      {
        "id": "124",
        "a": "Wed, 09 Aug 2023 10:00:00 GMT",
        "b": "Wed, 09 Aug 2023 18:02:31 GMT",
        "c": "A2",
        "d": "B2",
        "start_time": "Sat, 30 Dec 1899 14:00:00 GMT",
        "Date": "Wed, 09 Aug 2023"
      },
      {
        "id": "125",
        "a": "Wed, 09 Aug 2023 19:01:07 GMT",
        "b": "Wed, 09 Aug 2023 22:01:17 GMT",
        "c": "A1",
        "d": "B2",
        "start_time": "Sat, 30 Dec 1899 22:00:00 GMT",
        "Date": "Wed, 09 Aug 2023"
      },
      {
        "id": "126",
        "a": "Wed, 07 Aug 2023 06:00:00 GMT",
        "b": "Wed, 07 Aug 2023 17:00:23 GMT",
        "c": "A4",
        "d": "B3",
        "start_time": "Sat, 30 Dec 1899 06:00:00 GMT",
        "Date": "Wed, 07 Aug 2023"
      },
      {
        "id": "127",
        "a": "Wed, 09 Aug 2023 06:00:00 GMT",
        "b": "Wed, 09 Aug 2023 17:00:23 GMT",
        "c": "A4",
        "d": "B3",
        "start_time": "Sat, 30 Dec 1899 06:00:00 GMT",
        "Date": "Wed, 09 Aug 2023"
      },
      {
        "id": "128",
        "a": "Wed, 08 Aug 2023 06:00:00 GMT",
        "b": "Wed, 08 Aug 2023 17:00:23 GMT",
        "c": "A1",
        "d": "B1",
        "start_time": "Sat, 30 Dec 1899 06:00:00 GMT",
        "Date": "Wed, 09 Aug 2023"
      }
    ]
  },
  "transform": [
    {
      "filter": {
        "field": "Date",
        "range": [
          {"year": 2023, "month": "Aug", "date": 7},
          {"year": 2023, "month": "Aug", "date": 10}
        ]
      }
    },
    {
      "groupby": ["d"],
      "window": [{"op": "count", "field": "id", "as": "count_id"}],
      "sort": [{"field": "d"}]
    },
    {"calculate": "datum.count_id + 'x: ' + datum['d']", "as": "grouping"}
  ],
  "spacing": 10,
  "vconcat": [
    {
      "width": 300,
      "encoding": {
        "y": {
          "field": "c",
          "type": "ordinal",
          "title": null,
          "axis": {"labelColor": "black"}
        }
      },
      "layer": [
        {
          "params": [
            {
              "name": "highlight",
              "select": {"type": "point", "on": "mouseover"}
            }
          ],
          "mark": {"type": "bar", "stroke": "#5F5F5F", "cornerRadius": 4},
          "encoding": {
            "x": {
              "field": "a",
              "type": "temporal",
              "axis": {
                "labelExpr": "datum.label",
                "labelColor": "black",
                "grid": true,
                "gridDash": [5.5],
                "gridColor": "grey",
                "zindex": 1,
                "orient": "bottom",
                "format": "%H:%M:%S"
              },
              "title": "Time/Duration"
            },
            "x2": {"field": "b"},
            "color": {
              "condition": [
                {"test": "datum.d == 'B1'", "value": "#F95F3E"},
                {"test": "datum.d == 'B2'", "value": "#308DDC"},
                {"test": "datum.d == 'B3'", "value": "#2BC121"}
              ],
              "legend": null
            },
            "strokeWidth": {
              "condition": [
                {"param": "user_selected", "empty": false, "value": 1}
              ],
              "value": 0
            },
            "opacity": {
              "condition": {"selection": "user_selected", "value": 1},
              "value": 0.2
            },
            "tooltip": [
              {
                "field": "a",
                "title": "Start",
                "type": "temporal",
                "format": "%d-%b-%y %H:%M"
              },
              {
                "field": "b",
                "title": "End",
                "type": "temporal",
                "format": "%d-%b-%y %H:%M"
              },
              {"field": "d", "title": "D", "type": "nominal"}
            ]
          }
        },
        {
          "mark": {"type": "point", "stroke": "transparent"},
          "encoding": {
            "x": {
              "field": "Date",
              "type": "temporal",
              "title": null,
              "axis": {
                "labelColor": "black",
                "grid": true,
                "gridDash": [5.5],
                "zindex": 1,
                "orient": "top",
                "format": "%d-%b-%y",
                "labelExpr": "hours(datum['value']) == 0 ? datum['label'] : ''"
              }
            }
          }
        }
      ]
    },
    {
      "width": 300,
      "params": [
        {
          "name": "user_selected",
          "select": {"type": "point", "fields": ["d"]},
          "on": "click",
          "clear": "click"
        }
      ],
      "mark": {"type": "rect", "cornerRadius": 3, "width": 15, "height": 15},
      "encoding": {
        "x": {
          "field": "grouping",
          "type": "ordinal",
          "axis": {
            "labelPadding": -7,
            "orient": "bottom",
            "title": null,
            "labelAngle": 0,
            "domain": false,
            "ticks": false,
            "labelLimit": 50
          },
          "sort": {"field": "d", "order": "ascending"}
        },
        "color": {
          "condition": [
            {"test": "datum.d == 'B1'", "value": "#F95F3E"},
            {"test": "datum.d == 'B2'", "value": "#308DDC"},
            {"test": "datum.d == 'B3'", "value": "#2BC121"}
          ],
          "value": "white"
        }
      }
    }
  ],
  "config": {"axis": {"titleColor": "black"}, "view": {"stroke": "transparent"}}
}