I'm building a wireframe of an HTML page in which I have some vega-lite charts.
Is there a way to render only the legend of a chart? If yes, how to?
I don't know of a built-in way to display only the legend, but you can hack it by removing all positional encodings, setting the mark opacity to zero, and setting the view width/height to 0. For example, here is a way to generate just the legend from this Vega-Lite example:
{
"data": {
"url": "data/penguins.json"
},
"mark": {"type": "point", "opacity": 0},
"encoding": {
"color": {"field": "Species", "type": "nominal"},
"shape": {"field": "Species", "type": "nominal"}
},
"config": {"view": {"width": 0, "height": 0}}
}
Related
I'm trying to use tick marks to separate a stacked bar but I can't figure out how to make the tick marks full width of the responsive bar mark (example).
The reason I am doing this is I want the ticks to look like separators between the stacked bars. Another approach I have tried is setting stroke (example) on the bar mark but this adds a border to the left and right of the bars which I don't want. I only want the separator to be between two bars vertically.
You can simply add the width config inside your mark objects.
Refer the below config or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
"width": "container",
"data": {"url": "data/cars.json"},
"layer": [
{
"mark": {"type": "bar", "width": 50},
"encoding": {
"y": {"field": "Horsepower", "type": "quantitative"},
"x": {"field": "Cylinders", "type": "ordinal"}
}
},
{
"mark": {"type": "tick", "color": "tomato", "width": 50},
"encoding": {
"y": {"field": "Horsepower", "type": "quantitative", "stack": true},
"x": {"field": "Cylinders", "type": "ordinal"}
}
}
]
}
I am trying to set a gradient legend as described here on a vega-lite box plot. Even by setting the color encoding as "quantitative", the legend remains with symbols.
You can compare the behavior of bar chart vs. box plot with quantitative color encoding. The legend on the bar chart is a gradient one, while on the box plot it is with symbols.
Any ideas why?
Not sure what is causing this inconsistent behaviour for bar chart and box plot. This works normally but as an alternative for getting the gradient legend you can use the fill config instead of color as it seems to bring the expected legend for quantitative type.
Refer the editor of below snippet:
{
"config": {
"view": {"continuousWidth": 400, "continuousHeight": 300},
"axis": {"labelAngle": 360, "labelFontSize": 16, "titleFontSize": 16},
"legend": {}
},
"height": 350,
"width": 300,
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.",
"data": {"url": "data/cars.json"},
"mark": {
"type": "boxplot",
"orient": "horizontal",
"size": 15,
"median": {"stroke": "white", "strokeWidth": 0.5}
},
"encoding": {
"x": {"field": "Miles_per_Gallon", "type": "quantitative"},
"fill": {"field": "Cylinders", "type": "quantitative", "bin": false},
"y": {"field": "Cylinders", "type": "quantitative"}
}
}
I'm fairly new to vega-lite. I'd really like to get the following interactive bar chart working:
Legend for the bar chart that can be clicked on to highlight one or more bars
Click on one or more bars to highlight and reflect that it legend
When highlighed, show text value above the bar.
My strategy for building this is to have two layers, one layer for the bars, and one for the text. Then one selection that is in 'multi' mode on mousedown, and also bound to the legend.
My question is two-fold:
Is it possible to have a selection bound to the legend but also utilize mousedown?
I'm having a hard time understanding how selections work in layered graphs/charts. If I define the selection outside of the layers I get a warning saying selection can't be found, and the selection only works as expected if I put it in the definition of the first layer. Additionally, the legend binding seems to work if I don't have layers, but stops working when I do have layers. Is this a limitation of the library or am I doing something wrong.
Here is my schema, thanks for any help in advance!
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {
"field": "0"
},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {"type": "multi", "bind": "legend"}
}
},
{
"transform": [{"filter": {"selection":"series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
You were quite close. When you bind a selection to a legend, by default it deactivates other ways of interacting. But as mentioned briefly in the Legend Binding docs, you can re-enable this by specifying the "on" attribute. Here is the result (Open in editor):
{
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {"field": "0"},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {
"type": "multi",
"encodings": ["color"],
"on": "click",
"bind": "legend"
}
}
},
{
"transform": [{"filter": {"selection": "series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
Regarding your second question: currently selections must be defined within the layers they are bound to, but this will likely change in future Vega-Lite versions; see https://github.com/vega/vega-lite/pull/6919.
In Vega Lite, I am trying to align my legend to the middle of this chart. I need something like an anchor parameter for the legend, but I can only find titleAnchor.
Chart with Legend
"legend": {
"title": "Signed NDA",
"orient": "bottom",
"titleAnchor": "middle"
}
This is how my legend looks right now. Anyone know how to do this?
This is actually possible within Vega 5.0, legend layout property, by setting the anchor property to "middle", in the legend's layout config.
Providing layout doesn't seem to be directly supported by Vega-Lite yet, but it is possible to propagate a layout definition from Vega-Lite to Vega.
Following Jake's answer, in Vega-Lite editor:
{
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"}
},
"height": 300,
"width": 400,
"config": {
"legend": {"orient": "bottom", "layout": {"bottom": {"anchor": "middle"}}}
}
}
Specifying the config at the end basically allows you to customize how the orient "bottom" should look.
There is no option to anchor the legend in the bottom center, but you can set orient: "none" and use the legendX and legendY properties to locate it exactly where you would like. For example (vega editor):
{
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"field": "Origin",
"type": "nominal",
"legend": {
"orient": "none",
"direction": "horizontal",
"legendX": 120,
"legendY": 340,
"title": null
}
}
},
"height": 300,
"width": 400
}
I have this plot and I am trying to make the dashed line really thin compared to the others, but can't quite figure it out. I've tried size on the actual mark-rule encoding part, as well as strokeWidth in the config (which at least the vega example here suggests is what i want) but no joy. What am I missing?
It appears that non-integer stroke widths are rounded up in rule marks; however this is not the case for line marks. If you replace your rule layer with this, it seems to do what you wish:
{
"data": {
"values": [
{"date": "2019-12-10", "metric": 100},
{"date": "2019-12-16", "metric": 100}
]
},
"mark": {"type": "line", "strokeWidth": 0.5, "color": "black"},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "monthdate"},
"y": {"field": "metric", "type": "quantitative"}
}
}
Here is the result (vega editor):