# Interactive legend doesn't work with orient type 'none'
**URL:** https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652
**Category:** Kibana
**Created:** [October 14, 2022, 3:10pm UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652 "2022-10-14T15:10:41Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@karlanakamura](https://discuss.elastic.co/u/karlanakamura)
#### Post date: [October 14, 2022, 3:10pm UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652/1 "2022-10-14T15:10:41Z")
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.
```auto
"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,
}
}
}
]
```
---
### Author:  [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)
#### Post date: [October 18, 2022, 8:19am UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652/2 "2022-10-18T08:19:33Z")
HI [karlanakamura](https://discuss.elastic.co/u/karlanakamura)
This seems to be more of an issue within [vega](https://github.com/vega/vega) itself.
Could you check whether the same issue occurs in the [vega editor](https://vega.github.io/editor/#/custom/vega)?
Best regards
Felix
Get more [Kibana Vega examples](https://elastic-content-share.eu/downloads/category/kibana/kibana-vega-examples/)
---
### Author:  [@karlanakamura](https://discuss.elastic.co/u/karlanakamura)
#### Post date: [October 18, 2022, 6:02pm UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652/3 "2022-10-18T18:02:10Z")
Hi,
I took a [Line Chart Example](https://vega.github.io/vega/examples/line-chart/) and set the legends to be the way I want. In [vega editor](https://vega.github.io/editor/#/edited) 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.
```auto
{
"$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
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [November 14, 2022, 3:14pm UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652/4 "2022-11-14T15:14:35Z")
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [December 12, 2022, 3:15pm UTC](https://discuss.elastic.co/t/interactive-legend-doesnt-work-with-orient-type-none/316652/5 "2022-12-12T15:15:13Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.