labelLimit doesn't work in legend update (Vega)

Elastic Stack Kibana
1

Hi there!

I have an issue with length of legend labels, because my text doesn't go in the standart length and a command for widening doesn't work. Could you please give a reccomendation about how to use that command correctly.

I put it here:

"legends": [
{
"fill": "color",
"encode": {
"labels": {
"update": {
"labelLimit": {
"value": 300
},
...

legend

2

@Lidiya_Chernova,

I don't believe Vega can truncate legends. I think that would be more of a question for that project to get details on it: https://groups.google.com/forum/#!forum/vega-js.

Perhaps as a work-around, you could include a script-field in your Elasticsearch-query, where you do the truncation. For more info, see here: https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-script-fields.html

3

Hi @thomasneirynck! Thank you for your quick answer.
No, it's exact Vega does, because I have a legend with defined meanings which I set in scales:

{
  "name": "color",
  "type": "ordinal",
  "domain": [
    "число здоровых команд",
    "число команд с отклонениями"
  ],
  "range": [
    "#11a74c",
    "#ff0000"
  ]
}

As you see a phrase "число команд с отклонениями" here is full.

4

Hi @nyuriks! Maybe you could help me with this issue?

5

@Lidiya_Chernova to better help, could you provide a small example of a runnable Vega graph? This way if it is a bug in Vega itself, we could file a bug with them. The smaller your example, the easier it will be for everyone to understand the issue. Thanks!

6

Ok, so what the best way to do it in a case when I use and transform data from Elastic indeces ( "url": {
"index": "metrics-data-*", ...)?

7

@Lidiya_Chernova could you provide a working Vega example (something very small but working), demonstrating the problem? Especially something that would work without any data in the Vega editor. It will be easier to show what to change in that example.

8

Ok, if i understood you correctly, here a Vega template example where I put the legend the way I do it in my visualizations. And there are also a limit on amount of legend labels.

{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 400,
"height": 200,
"padding": 5,

"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],

"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],

"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": [
"N командам назначены задачи по отклонениям",
"Количество чего-то по выбранной команде"
],
"range": [
"steelblue",
"red"
]
}
],

"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],

"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
],
"legends": [
{
"fill": "color",
"encode": {
"labels": {
"update": {

        "fontSize": {
          "value": 13
        },
        "font": {
          "value": "Segoe UI, Helvetica, Open Sans, Arial"
        },
        "fill": {
          "value": "#999"
        }
      },
      "hover": {
        "fill": {
          "value": "firebrick"
        }
      }
    },
    "symbols": {
      "update": {
      "size": {"value": 80},
      "shape": {"value": "square"}
       
      }
    },
    "legend": {
      "update": {
        "stroke": {
          "value": "#ccc"
        },
        "strokeWidth": {
          "value": 0
        }
      }
    }
  },
  "orient": "bottom"
}

]
}

9

@nyuriks can you help me with this problem, please?

10

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.