I am using a clone of this VEGA-lite example and its chart spec as reference, and added the renderer option
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A simple ...",
"..ETC..": "...",
"renderer": "svg"
}
But chart stay as PNG... How to use renderer option?
PS: the online spec have no renderer definition... there are some confusion about VEGA-lite and VEGA-view?
The renderer is not a property of the Vega-Lite specification, but rather a Vega-Embed option.
How to specify it depends on how you are rendering your chart. For example, if you open the chart in the vega editor, you can choose the SVG renderer from the Settings menu in the upper right.
If you are generating HTML directly, you can pass the embed options to the vegaEmbed call; for example:
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vl.json";
vegaEmbed("#vis", spec, {renderer: "svg"})
.then(result => console.log(result))
.catch(console.warn);
</script>
</body>
It is also possible to express Vega-Embed options within the usermeta field of the chart specification itself; for example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"usermeta": {"embedOptions": {"renderer": "svg"}},
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
This should work correctly in any vega-embed call (but won't work, for example, in the vega editor, which uses a different rendering approach).
© 2022 - 2024 — McMap. All rights reserved.