jsonchartsvisualizationvega-litevega
Legend Alignment in Vega Lite
I hope you're all doing well.
I'm conducting some tests and would like to know if anyone has experience with a similar situation.
I'm working with a horizontal bar chart and have placed the legends at the top. Currently, with the settings orient="top" and direction="horizontal," the legends align with the Y-axis line. However, my goal is to align the legends with the left margin of the chart.
Here's an illustrative image showing the current alignment. If anyone has any tips or experience in adjusting the legend alignment in this way, I would greatly appreciate the help.
Current version
I would like it to look like this.
Is it possible?
Thank you in advance for your assistance.
I tried the commands orient="top" and direction="horizontal," but it didn't change the position.
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"description":"A simple bar chart with embedded data.",
"width":630,
"data":{
"values":[
{
"Local":"ALL",
"Ano":"2023",
"Valor":27076
},
{
"Local":"SE",
"Ano":"2023",
"Valor":14132
},
{
"Local":"CW",
"Ano":"2023",
"Valor":6434
},
{
"Local":"SO",
"Ano":"2023",
"Valor":1036
},
{
"Local":"NO",
"Ano":"2023",
"Valor":2684
},
{
"Local":"NW",
"Ano":"2023",
"Valor":2790
},
{
"Local":"ALL",
"Ano":"2024*",
"Valor":55584
},
{
"Local":"SE",
"Ano":"2024*",
"Valor":29507
},
{
"Local":"CW",
"Ano":"2024*",
"Valor":11190
},
{
"Local":"SO",
"Ano":"2024*",
"Valor":10961
},
{
"Local":"NO",
"Ano":"2024*",
"Valor":2454
},
{
"Local":"NW",
"Ano":"2024*",
"Valor":1472
}
]
},
"layer":[
{
"mark":"bar"
},
{
"mark":{
"type":"text",
"align":"left",
"baseline":"middle",
"font":"Arial",
"dx":4
},
"encoding":{
"text":{
"field":"Valor",
"type":"quantitative"
}
}
}
],
"encoding":{
"y":{
"field":"Local",
"type":"nominal",
"axis":{
"title":null,
"labelFont":"Arial",
"labelFontSize":14
}
},
"x":{
"field":"Valor",
"type":"quantitative",
"axis":{
"title":null,
"labelFont":"Arial",
"labelFontSize":12
}
},
"yOffset":{
"field":"Ano"
},
"color":{
"field":"Ano"
}
},
"config":{
"autosize":{
"type":"fit-x",
"contains":"padding"
},
"background":"#fff",
"font":"Arial",
"axis":{
"domainColor":"#cbcbcb",
"grid":false,
"gridColor":"#cbcbcb",
"gridWidth":1,
"labelColor":"#000",
"labelFontSize":10,
"titleColor":"#333",
"tickColor":"#cbcbcb",
"tickSize":10,
"titleFontSize":14,
"titlePadding":10,
"labelPadding":4,
"title":null
},
"text":{
"fontSize":14
},
"axisBand":{
"grid":false
},
"legend":{
"labelColor":"#333",
"labelFontSize":11,
"padding":1,
"symbolSize":30,
"symbolType":"square",
"titleColor":"#333",
"titleFontSize":14,
"titlePadding":10,
"title":null,
"direction":"horizontal",
"orient":"top",
"layout":{
"top":{
"bounds":"full",
"margin":10,
"center":false
}
}
},
"view":{
"stroke":null
},
"bar":{
"binSpacing":2,
"fill":"#135aa3",
"stroke":null
},
"range":{
"category":[
"#135aa3",
"#f47080"
]
}
}
}
Solution
Here you go.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"width": 630,
"padding": {"top": 30},
"data": {
"values": [
{"Local": "ALL", "Ano": "2023", "Valor": 27076},
{"Local": "SE", "Ano": "2023", "Valor": 14132},
{"Local": "CW", "Ano": "2023", "Valor": 6434},
{"Local": "SO", "Ano": "2023", "Valor": 1036},
{"Local": "NO", "Ano": "2023", "Valor": 2684},
{"Local": "NW", "Ano": "2023", "Valor": 2790},
{"Local": "ALL", "Ano": "2024*", "Valor": 55584},
{"Local": "SE", "Ano": "2024*", "Valor": 29507},
{"Local": "CW", "Ano": "2024*", "Valor": 11190},
{"Local": "SO", "Ano": "2024*", "Valor": 10961},
{"Local": "NO", "Ano": "2024*", "Valor": 2454},
{"Local": "NW", "Ano": "2024*", "Valor": 1472}
]
},
"layer": [
{"mark": "bar"},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"font": "Arial",
"dx": 4
},
"encoding": {"text": {"field": "Valor", "type": "quantitative"}}
}
],
"encoding": {
"y": {
"field": "Local",
"type": "nominal",
"axis": {"title": null, "labelFont": "Arial", "labelFontSize": 14}
},
"x": {
"field": "Valor",
"type": "quantitative",
"axis": {"title": null, "labelFont": "Arial", "labelFontSize": 12}
},
"yOffset": {"field": "Ano"},
"color": {"field": "Ano"}
},
"config": {
"autosize": {"type": "fit-x", "contains": "padding"},
"background": "#fff",
"font": "Arial",
"axis": {
"domainColor": "#cbcbcb",
"grid": false,
"gridColor": "#cbcbcb",
"gridWidth": 1,
"labelColor": "#000",
"labelFontSize": 10,
"titleColor": "#333",
"tickColor": "#cbcbcb",
"tickSize": 10,
"titleFontSize": 14,
"titlePadding": 10,
"labelPadding": 4,
"title": null
},
"text": {"fontSize": 14},
"axisBand": {"grid": false},
"legend": {
"labelColor": "#333",
"labelFontSize": 11,
"padding": 0,
"symbolSize": 30,
"symbolType": "square",
"titleColor": "#333",
"titleFontSize": 14,
"titlePadding": 10,
"title": null,
"direction": "horizontal",
"orient": "none",
"legendX": -40,
"legendY": -20
},
"view": {"stroke": null},
"bar": {"binSpacing": 2, "fill": "#135aa3", "stroke": null},
"range": {"category": ["#135aa3", "#f47080"]}
}
}
- No quotes in MongoDB JSON
- How can I parse (read) and use JSON in Python?
- How to access multidimensional data from a json file?
- How to remove return to line in a list in a JSON file?
- Shouldn't JSON.parse(null) and JSON.parse(false) throw exceptions?
- SpringBoot RestTemplate ignores spring.jackson.serialization.WRITE_DATES_AS_TIMESTAMPS = false
- Why and when do we need to flatten JSON objects?
- Get single field from JSON using Jackson
- Paging Through Records Using jQuery
- Json_decode display field start chronological order
- MongoDB, Convert a string with commas to double in $convert(aggregation). Failed to parse number '1,533.07'
- Change Existing JSON value "JSON_MODIFY" must be a string literal
- How can I use a linear-gradient in a VS Code theme?
- which is the best way to convert json into a dataframe?
- How to use @Serializer on deeper JSON datastructures
- JOLT Transformation: How to Conditionally Merge Two Fields and Retain Other Attributes?
- Nasa API pass the data so slow
- Adding transform in vega-lite hides the data
- Get JSON representation of request body as a string
- How to loop through the values of the dictionaries which are nested as values in a json file?
- Querying nested JSON files in Powershell
- How to convert selected HTML to Json?
- Is polymorphic deserialization possible in System.Text.Json?
- Parsing multiple JSON objects in Go
- functionTimeout not working in local.settings.json Azure Function in my local machine
- How do you JSON.stringify an ES6 Map?
- RestClientException: Could not extract response. no suitable HttpMessageConverter found
- Json_Annotation does not handle nested classes properly
- Can I specify a path in an attribute to map a property in my class to a child property in my JSON?
- How do I use a custom Serializer with Jackson?