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.
Related
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 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}}
}
I'm making time series charts with Vega-Lite and I want to set the min and max values of the x-axis independent of the values that are being displayed. The reason is that I'm displaying multiple time series side by side in separate charts, and I want their x-axes to line up even when some series begin earlier than others.
I've found encoding.x.scale.domain, which seems like it's the right property to use. The documentation says that for temporal fields this should be a two element array of timestamps. However, it does not seem to matter what I set it to, my chart does not render any line, nor any ticks on the x-axis, and the warning Infinite extent for field "data": [Infinity, -Infinity]" is printed in the console.
Even more confusing is that I've been able to control the y-axis by setting encoding.y.scale.domain in the same way.
The following is a simplified version of the chart spec that I have experimented with in the Vega Editor. I'm trying to set the x-axis to start at an earlier point in time and end at a later point in time than the actual values:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"ts": 1500400000000, "v": 1},
{"ts": 1500500000000, "v": 2},
{"ts": 1500600000000, "v": 3},
{"ts": 1500700000000, "v": 2}
]
},
"width": 800,
"height": 300,
"mark": {"type": "line"},
"encoding": {
"x": {"field": "ts", "type": "temporal", "scale": {"domain": [1500000000000, 1500900000000]}},
"y": {"field": "v", "type": "quantitative", "scale": {"domain": [0, 5]}}
}
}
If I remove the encoding.x.scale.domain property it renders a line, but when including it I can't figure out any values that don't result in the warning.
Is this even the right way to set the min and max of the x-axis? Why does it work for the y-axis but not x-axis? What's the right way to do this?
What you tried is the correct way to specify temporal domains in Vega-Lite, but there is a bug in this behavior that was introduced in Vega-Lite 4.5. Here is the result of your spec using Vega-Lite 4.4:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.4"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
</head>
<body>
<div id="vis"></div>
<script>
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"ts": 1500400000000, "v": 1},
{"ts": 1500500000000, "v": 2},
{"ts": 1500600000000, "v": 3},
{"ts": 1500700000000, "v": 2}
]
},
"width": 800,
"height": 300,
"mark": {"type": "line"},
"encoding": {
"x": {"field": "ts", "type": "temporal", "scale": {"domain": [1500000000000, 1500900000000]}},
"y": {"field": "v", "type": "quantitative", "scale": {"domain": [0, 5]}}
}
};
vegaEmbed("#vis", spec);
</script>
</body>
</html>
I've filed a bug report at https://github.com/vega/vega-lite/issues/6060
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):
I'm trying to make a simple stacked bar chart, only on the X axis. I have it working, with two values of 50, and 250. So the max of the X axis shows as 300.
How do I force that to another value, like 500? So there is a gap from the last value, to the end of the axis?
In assuming it is via a scale domain somehow? I'm having a tough time understanding all of the options.
You can set the axis limits using the scale domain. Here is an example (vega editor link):
{
"data": {"values": [{"x": 50, "c": 1}, {"x": 250, "c": 2}]},
"mark": "bar",
"encoding": {
"x": {"field": "x", "type": "quantitative", "scale": {"domain": [0, 500]}},
"color": {"field": "c", "type": "ordinal"}
}
}