Interactive legend doesn't work with orient type 'none'

[karlanakamura]

Hello,

I'm using version 8.4.3 of elastic cloud.

I'm having problems with the legends, I need to use the 'none' orient type because the legend was not getting the position I would like. After I changed it to 'none', the legend stopped being interactive (obs: when I had orient of type right it worked, the only thing I changed was the orient to 'none'). I need the legend to be interactive, because I apply some filters with the event streams. Is there any way to make the legends interactive with orient 'none'?

Following is the legends config.

"legends": [
    {
      "stroke": "color",
      "fill": "color",
      "direction": "horizontal",
      "orient": "none",
      "columns": 2,
      "columnPadding": 10,
      "rowPadding": 5,
      "legendX": 0,
      "encode": {
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "fontSize": {"value": 12},
            "fill": {"value": "#69707D"}
          },
          "hover": {
            "fill": {"value": "black"}
          }
        },
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
        }
      }
    }
  ]

[Felix_Roessel]

HI karlanakamura

This seems to be more of an issue within vega itself.
Could you check whether the same issue occurs in the vega editor?

Best regards
Felix

Get more Kibana Vega examples

[karlanakamura]

Hi,

I took a Line Chart Example and set the legends to be the way I want. In vega editor it works normally, but when I put it in Custom visualization (in kibana's visualize library) it doesn't work! So the problem isn't the way I'm doing it.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic line chart example.",
  "width": 500,
  "height": 200,
  "padding": 5,

  "signals": [
    {
      "name": "interpolate",
      "value": "linear",
      "bind": {
        "input": "select",
        "options": [
          "basis",
          "cardinal",
          "catmull-rom",
          "linear",
          "monotone",
          "natural",
          "step",
          "step-after",
          "step-before"
        ]
      }
    },
    {
      "name": "select_legend",
      "value": null,
      "on":[
        {
          "events": "@legendSymbol:mouseover, @legendLabel:mouseover",
          "update": "datum.value"
        },
        {
          "events": "@legendSymbol:mouseout,    @legendLabel:mouseout",
          "update": "null"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 20, "c":1},
        {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 35, "c":1},
        {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 10, "c":1},
        {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 15, "c":1},
        {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1},
        {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 28, "c":1},
        {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1},
        {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1},
        {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1},
        {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 25, "c":1}
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "y"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "c"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],

  "legends": [
    {
      "stroke": "color",
      "fill": "color",
      "direction": "horizontal",
      "orient": "none",
      "columns": 2,
      "columnPadding": 10,
      "rowPadding": 5,
      "legendX": {"signal": "width-60"},
      "encode": {
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "fontSize": {"value": 12},
            "fill": {"value": "#69707D"}
          },
          "hover": {
            "fill": {"value": "black"}
          }
        },
        "symbols": {
          "name": "legendSymbol",
          "interactive": true
        }
      }
    }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "c"
        }
      },
      "marks": [
        {
          "type": "line",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "y", "field": "y"},
              "stroke": {"scale": "color", "field": "c"},
              "strokeWidth": {"value": 2}
            },
            "update": {
              "interpolate": {"signal": "interpolate"},
              "strokeOpacity": [
                {"test": "select_legend == null", "value": 1},
                {"test": "select_legend == datum.c", "value": 1},
                {"test": "datum.c != null & select_legend != datum.c", "value": 0.3},
                {"value": 1}
              ]
            },
            "hover": {
              "strokeOpacity": {"value": 0.5}
            }
          }
        }
      ]
    }
  ]
}

Best regards,
Karla Nakamura