I would like to create a Pie Chart in Vega-Lite. I have already created one, but I would like its radius to be responsive to the screen size on which the web page is displayed.
vegaEmbed("#pie-chart", {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
autosize: {
type: "fit",
contains: "padding",
},
resize: true,
layer: [
{mark: {type: "arc", innerRadius: 35, outerRadius: 80}},
{
mark: {type: "text", radius: 57.5, fill: "white"},
encoding: {
text: {field: "count", type: "nominal"},
},
},
],
encoding: {
color: {
field: "name",
type: "nominal",
},
theta: {
field: "count",
type: "quantitative",
stack: true,
},
},
data: {
values: [
{
name: "a",
count: 21,
},
{
name: "b",
count: 6,
},
{
name: "c",
count: 3,
},
{
name: "d",
count: 3,
},
{
name: "e",
count: 2,
},
{
name: "f",
count: 1,
},
{
name: "g",
count: 2,
},
{
name: "h",
count: 1,
},
],
},
});<!DOCTYPE html>
<html>
<head>
<title>Data visualizer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
<span id="pie-chart"></span>
</body>
</html>I've considered creating a JavaScript function which, based on the screen width, dynamically re-generates the graph based on the width with a variable radius, but that solution seems overly complex and prone to errors. Does anyone have a recommendation for the way in which I may make the size of the pie-chart responsive? In addition to that, as you may have noticed the left side of the chart is clipped, presumably due to the inclusion of a legend. Does anyone happen to know of a quick fix that may fix this without manually setting the size of the graph's container?