How do I center a vega-lite graph in item.html? - html

Question

I'm working on aligning a vegalite graph to the center of the webpage, but I've only been able to get it displaying on the left side.
I have two other graphs that I've been able to place right next to each other, but I'm pretty lost on how to center the first graph.
I'm looking to create something like this:
Graph 1
Graph 2 Graph 3
Here is what I have so far, and it is currently displayed like this:
Graph 1
Graph 2 Graph3
<table>
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div id="vis2" display="block"></div></td>
</tr>
</table>
<br><br>
<table>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div id="vis3"></div></td>
<td><div id="vis4"></div></td>
</tr>
</table>

Answer 1

You can simply add style in your table as width: 100%; and in your div blocks you can use style="display: block;" where you are trying to display the vega chart. Also in your vega spec config, add width: 'container' which will keep the width size as per the parent container.
Refer the below snippet or fiddle:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"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
}
]
},
"autosize2": {"contains": "padding", "resize": true, "type": "fit"},
width: 'container',
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "ordinal"
},
"y": {
"field": "b",
"type": "quantitative"
}
}
}
vegaEmbed("#vis2", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis3", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis4", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
<script src="https://cdn.jsdelivr.net/npm/vega#5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.17.0/build/vega-embed.min.js"></script>
<table style="width: 100%;">
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis2"></div></td>
</tr>
</table>
<br><br>
<table style="width: 100%;">>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis3"></div></td>
<td><div style="display: block;" id="vis4"></div></td>
</tr>
</table>