labelLimit doesn't work in legend update (Vega)


(Lidiya Chernova) #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


(Thomas Neirynck) #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


(Lidiya Chernova) #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.


(Lidiya Chernova) #4

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


(Yuri Astrakhan) #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!


(Lidiya Chernova) #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-*", ...)?


(Yuri Astrakhan) #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.


(Lidiya Chernova) #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"
}

]
}


(Lidiya Chernova) #9

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