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):
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 want to have images as my axis labels. I tried to use the image mark, but that did not work and that is kind of expected. Label expression is also something I tried, but that did not work if I want it to be an image. What else could I tried or is it possible at all?
Line chart example
Using the same technique in another answer, an image axis can be added via an extra layer:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 0.5, "y": 0.5, "img": "data/ffox.png"},
{"x": 1.5, "y": 1.5, "img": "data/gimp.png"},
{"x": 2.5, "y": 2.5, "img": "data/7zip.png"}
]
},
"layer": [{
"mark": {"type": "image", "width": 50, "height": 50},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"},
"url": {"field": "img", "type": "nominal"}
}
}, {
"transform": [{"calculate": "-.2", "as": "axis"}],
"mark": {"type": "image", "width": 25, "height": 25},
"encoding": {
"x": {"field": "x", "type": "quantitative", "axis":{"labelExpr": "", "title": null}},
"y": {"field": "axis", "type": "quantitative", "scale": {"domain": [0, 2.5]}},
"url": {"field": "img", "type": "nominal"}
}
}],
"resolve": {"scale": {"y": "shared"}}
}
Vega Editor
===== 2021-07-20 =====
Your BarChart's x encoding uses the x field which is not evenly distributed, so it is misaligned.
If you do have the a field shown in your editor, simplest way is to replace the encoding as "x": {"field": "a", "type": "ordinal", "axis": null}
Vega Editor
Even the a field was not there, you may wanna add such a field for aligning, or even ordering, the image axis.
The last resort I can think of is window transform which is an overkill, but adds no extra value as well:
Vega Editor
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, 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
}