Offset issue in Grouped bar chart in Vegalite
I want to create a Grouped Bar Chart , it look good when data is less but when data is large then bar overlap to each other See chart in Editor
i want bar clearly display with eqaul width
Solution
UPDATE
{"name": "BarWidth", "expr": "length(data('source_0'))/3/4"},
UPDATE END
You have a param named BarWidth - just reduce that number. Here I have made it 5.
{
"config": {
"legend": {
"layout": {"bottom": {"anchor": "middle"}, "top": {"anchor": "middle"}},
"orient": {"expr": "LegendOrient"}
}
},
"data": {
"values": [
{
"Calendar Month ID - YYYYMM": "201201",
"Measures": "Cancel-Tickets",
"Measures Value": 223
},
{
"Calendar Month ID - YYYYMM": "201201",
"Measures": "Confirm-Ticket",
"Measures Value": 1687
},
{
"Calendar Month ID - YYYYMM": "201201",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 1910
},
{
"Calendar Month ID - YYYYMM": "201202",
"Measures": "Cancel-Tickets",
"Measures Value": 140
},
{
"Calendar Month ID - YYYYMM": "201202",
"Measures": "Confirm-Ticket",
"Measures Value": 1475
},
{
"Calendar Month ID - YYYYMM": "201202",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 1615
},
{
"Calendar Month ID - YYYYMM": "201203",
"Measures": "Cancel-Tickets",
"Measures Value": 207
},
{
"Calendar Month ID - YYYYMM": "201203",
"Measures": "Confirm-Ticket",
"Measures Value": 1787
},
{
"Calendar Month ID - YYYYMM": "201203",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 1994
},
{
"Calendar Month ID - YYYYMM": "201204",
"Measures": "Cancel-Tickets",
"Measures Value": 196
},
{
"Calendar Month ID - YYYYMM": "201204",
"Measures": "Confirm-Ticket",
"Measures Value": 1795
},
{
"Calendar Month ID - YYYYMM": "201204",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 1991
},
{
"Calendar Month ID - YYYYMM": "201205",
"Measures": "Cancel-Tickets",
"Measures Value": 277
},
{
"Calendar Month ID - YYYYMM": "201205",
"Measures": "Confirm-Ticket",
"Measures Value": 1629
},
{
"Calendar Month ID - YYYYMM": "201205",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 1906
},
{
"Calendar Month ID - YYYYMM": "201206",
"Measures": "Cancel-Tickets",
"Measures Value": 349
},
{
"Calendar Month ID - YYYYMM": "201206",
"Measures": "Confirm-Ticket",
"Measures Value": 1922
},
{
"Calendar Month ID - YYYYMM": "201206",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 2273
},
{
"Calendar Month ID - YYYYMM": "201207",
"Measures": "Cancel-Tickets",
"Measures Value": 416
},
{
"Calendar Month ID - YYYYMM": "201207",
"Measures": "Confirm-Ticket",
"Measures Value": 2197
},
{
"Calendar Month ID - YYYYMM": "201207",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 2614
},
{
"Calendar Month ID - YYYYMM": "201208",
"Measures": "Cancel-Tickets",
"Measures Value": 67
},
{
"Calendar Month ID - YYYYMM": "201208",
"Measures": "Confirm-Ticket",
"Measures Value": 705
},
{
"Calendar Month ID - YYYYMM": "201208",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 772
},
{
"Calendar Month ID - YYYYMM": "201209",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201209",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201209",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201210",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201210",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201210",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201211",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201211",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201211",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201212",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201212",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201212",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201301",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201301",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201301",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201302",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201302",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201302",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201303",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201303",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201303",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201304",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201304",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201304",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201305",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201305",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201305",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201306",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201306",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201306",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201307",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201307",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201307",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201308",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201308",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201308",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201309",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201309",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201309",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201310",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201310",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201310",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201311",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201311",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201311",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201312",
"Measures": "Cancel-Tickets",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201312",
"Measures": "Confirm-Ticket",
"Measures Value": 0
},
{
"Calendar Month ID - YYYYMM": "201312",
"Measures": "WaiyingLIst-Ticket",
"Measures Value": 0
}
]
},
"params": [
{"name": "ColorScheme", "value": "set2"},
{"name": "LegendLabelBaseline", "value": "middle"},
{"name": "LegendLabelColor", "value": "#000000"},
{"name": "LegendLabelFontSize", "value": 13},
{"name": "LegendLabellimit", "value": 0},
{"name": "LegendLabelOffset", "value": 5},
{"name": "LegendLabelOpicity", "value": 1},
{"name": "LegendSymbolOpicity", "value": 1},
{"name": "LegendSymbolSize", "value": 200},
{"name": "LegendSymbol", "value": "square"},
{"name": "YAxisTitleX", "value": -40},
{"name": "LegendOrient", "value": "top"},
{"name": "XAxisLabelAngle", "value": -45},
{"name": "XAxisTitle", "value": "Measures"},
{"name": "TitleAlign", "value": "center"},
{"name": "XAxisTitleAngle", "value": 0},
{"name": "TitleAnchor", "value": "middle"},
{"name": "XAxisPostion", "value": 1},
{"name": "XAxisLabelSize", "value": 13},
{"name": "XAxisTickSize", "value": 5},
{"name": "XAxisLabelLimit", "value": 0},
{"name": "XAxisLabelColor", "value": "black"},
{"name": "XAxisTitleColor", "value": "black"},
{"name": "XAxisTitleFontSize", "value": 16},
{"name": "TitleLimit", "value": 0},
{"name": "TitleOffset", "value": -10},
{"name": "TitleFontColor", "value": "black"},
{"name": "TitleFontSize", "value": 16},
{"name": "TitleBaseline", "value": "center"},
{"name": "TitleText", "value": "MAT Chart"},
{"name": "YAxisPostion", "value": 0},
{"name": "YAxisTickSize", "value": 2},
{"name": "YAxisLabelLimit", "value": 0},
{"name": "YAxisLabelColor", "value": "black"},
{"name": "YAxisLabelSize", "value": 13},
{"name": "YAxisTitleColor", "value": "black"},
{"name": "YAxisTitleFontSize", "value": 16},
{"name": "YAxisTitle", "value": "Measures Value"},
{"name": "YAxisLabelAngle", "value": -45},
{"name": "Subtitle", "value": ""},
{"name": "SubTitleColor", "value": "black"},
{"name": "SubtitleFont", "value": "bold"},
{"name": "SubtitleFontSize", "value": 16},
{"name": "BarWidth", "value": 5},
{"name": "BarCornerRadiusTopLeft", "value": 0},
{"name": "BarCornerRadiusTopRight", "value": 0},
{"name": "BarCornerRadiusBottomLeft", "value": 0},
{"name": "BarCornerRadiusBottomRight", "value": 0},
{"name": "BarOpacity", "value": 1},
{"name": "YAxisTitleAngle", "value": 270},
{"name": "LegendColumn", "value": 4},
{"name": "TitleDx", "value": 0}
],
"title": {
"align": {"expr": "TitleAlign"},
"anchor": {"expr": "TitleAnchor"},
"baseline": {"expr": "TitleBaseline"},
"color": {"expr": "TitleFontColor"},
"dx": {"expr": "TitleDx"},
"fontSize": {"expr": "TitleFontSize"},
"limit": {"expr": "TitleLimit"},
"offset": {"expr": "TitleOffset"},
"subtitle": {"expr": "Subtitle"},
"subtitleColor": {"expr": "SubTitleColor"},
"subtitleFont": {"expr": "SubtitleFont"},
"subtitleFontSize": {"expr": "SubtitleFontSize"},
"text": {"expr": "TitleText"}
},
"vconcat": [
{
"encoding": {
"x": {
"axis": {
"labelAngle": {"expr": "XAxisLabelAngle"},
"labelColor": {"expr": "XAxisLabelColor"},
"labelFontSize": {"expr": "XAxisLabelSize"},
"labelLimit": {"expr": "XAxisLabelLimit"},
"position": {"expr": "XAxisPostion"},
"tickSize": {"expr": "XAxisTickSize"},
"title": {"expr": "XAxisTitle"},
"titleAngle": {"expr": "XAxisTitleAngle"},
"titleColor": {"expr": "XAxisTitleColor"},
"titleFontSize": {"expr": "XAxisTitleFontSize"}
},
"field": "Calendar Month ID - YYYYMM",
"sort": {"field": "id"}
}
},
"height": 250,
"layer": [
{
"encoding": {
"color": {
"field": "Measures",
"legend": {
"columns": {"expr": "LegendColumn"},
"labelBaseline": {"expr": "LegendLabelBaseline"},
"labelColor": {"expr": "LegendLabelColor"},
"labelFontSize": {"expr": "LegendLabelFontSize"},
"labelLimit": {"expr": "LegendLabellimit"},
"labelOffset": {"expr": "LegendLabelOffset"},
"labelOpacity": {"expr": "LegendLabelOpicity"},
"symbolOpacity": {"expr": "LegendSymbolOpicity"},
"symbolSize": {"expr": "LegendSymbolSize"},
"symbolType": {"expr": "LegendSymbol"}
},
"scale": {"scheme": {"expr": "ColorScheme"}},
"title": ""
},
"xOffset": {"field": "Measures"},
"y": {
"axis": {
"grid": true,
"labelAngle": {"expr": "YAxisLabelAngle"},
"labelColor": {"expr": "YAxisLabelColor"},
"labelFontSize": {"expr": "YAxisLabelSize"},
"labelLimit": {"expr": "YAxisLabelLimit"},
"orient": "left",
"position": {"expr": "YAxisPostion"},
"tickSize": {"expr": "YAxisTickSize"},
"title": {"expr": "YAxisTitle"},
"titleAngle": {"expr": "YAxisTitleAngle"},
"titleColor": {"expr": "YAxisTitleColor"},
"titleFontSize": {"expr": "YAxisTitleFontSize"},
"titleX": {"expr": "YAxisTitleX"}
},
"field": "Measures Value",
"scale": {"zero": false},
"type": "quantitative"
}
},
"mark": {
"cornerRadiusBottomLeft": {"expr": "BarCornerRadiusBottomLeft"},
"cornerRadiusBottomRight": {"expr": "BarCornerRadiusBottomRight"},
"cornerRadiusTopLeft": {"expr": "BarCornerRadiusTopLeft"},
"cornerRadiusTopRight": {"expr": "BarCornerRadiusTopRight"},
"opacity": {"expr": "BarOpacity"},
"tooltip": true,
"type": "bar",
"width": {"expr": "BarWidth"}
}
}
],
"resolve": {"scale": {"color": "independent", "shape": "independent"}},
"width": "container"
}
]
}
- Webservice connecting do database with IOS, PHP, REST API, JSON
- Mapping through these JSON elements
- Loading json data from a file into Postgres
- JSON problem solution
- How to save value into JSON configuration file using Microsoft.Extensions.Configuration?
- What are structs should be according to API docs to parse data from response?
- ASP.NET Core appsettings.json update in code
- How do I convert a string to a table in Lua?
- Deserializing JSON with dynamic keys
- How to run query on JSON using jQuery Ajax
- Ignore Unparseable JSON with jq
- undefined name "array" while processing JSON message via AVRO Schema
- get size of JSON object
- How to read the request body using orjson library in FastAPI?
- How to read into JSON with Python? OSError: [Errno 36] File name too long:
- PowerShell ConvertFrom-Json ignores top-level array?
- How do I read a JSON file into (server) memory?
- Is there a way to extract JSON from an http response without having to build structs?
- error org.json.JSONException: No value for PROJECT_NAME This is my json
- FullCalendar error when one eventSource is empty
- Unable to fetch nested values from axios api response
- How do you get a formatted/indented JSON String from a JSON object?
- Putting HTML as part of string in JSON?
- Swift iOS NSJsonSerialization fails silently
- How to allow iOS app to search Rails JSON API?
- How to receive data from html form
- How to get the value of a key which contains unicode code point in a JSON?
- Why does Spring Boot Controller give JSON but empty structure [{},{}]
- What is the Rails way to handle different controller clients (Web, iOS API)?
- how do I read and write from/to a JSON file in the root folder of my project?