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"}
}
}
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'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}}
}
In Vega-Lite x-axis label names for bit long, so I have made that to an angle,
the label not showing in full, is it possible to make it visible in full,
also in the tooltip the window not showing full, name going out of window, is it possible to make the window bigger or wrap the text?
Also not all ticks of x-axis showing the label, only alternate ones are showing, how to correct that as well
The full label supposed to be, example:
creditloandata-extratreesclassifier-24nov2020-14h45m58s
You need to set the labelLimit axis property; for example (open in editor):
{
"data": {
"values": [
{"x": "creditloandata-extratreesclassifier-24nov2020-14h45m58s", "y": 1},
{"x": "creditloandata-extratreesclassifier-24nov2020-15h45m58s", "y": 2},
{"x": "creditloandata-extratreesclassifier-24nov2020-16h45m58s", "y": 3}
]
},
"mark": "line",
"encoding": {
"x": {
"field": "x",
"type": "nominal",
"axis": {"labelAngle": -30, "labelLimit": 0}
},
"y": {"field": "y", "type": "quantitative"}
},
"width": 400
}
The default labelLimit is 100, which means the labels are truncated past 100 pixels. You can set it to a higher value, or set it to zero to indicate that there should be no limit. See the Vega-Lite Axis Documentation for more information.
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):