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"
}
]
}
- jq: group and key by property
- How to resolve "TypeError: the JSON object must be str, bytes or bytearray, not NoneType" error, while working on translating with googletrans?
- Create a temporary image from URL not working
- How to Compare nested objects for changes and create a report of changes
- Openweathermap > json / fetch / property is not always available resulting in undefined
- No MediaTypeFormatter is available to read an object of type 'String' from content with media type 'text/plain'
- restassured jsonpath findAll not working as expected
- Import more than 1 json file using mongoimport
- Array from JSON not populating
- Convert Swagger Java Object into JSON/YAML
- ESP32, ArduinoJSON and MQTT: Stuck in process chain
- Jolt Transform add object to array
- How to get jq to output a long dataset?
- Converting from JSON to XML using c#
- JoltTransform: Split each object of input array into 2 separate object and place it in output array
- How to add in response HTTP data in Laravel?
- Vscode Run with debugger error "Launch program *file/path* does not exist
- Json_encode / JMS_Serializer, keep numeric key
- JOLT Transformation, copy an attribute into a dict at same level
- Custom TypeInfoResolver to manage polymorphic deserialization in System.Text.Json
- I am unable to figure out how to parse through an API response consisting of lists and dictionaries to get details - Python
- tsconfig.json: Build:No inputs were found in config file
- Could not determine JSON object type for anonymous type
- Convert or translate a big RDF/XML file to JSON-LD format - HOW?
- UnicodeDecodeError: 'utf8' codec can't decode byte 0xa5 in position 0: invalid start byte
- How to get some values from a JSON string in C#?
- How to Parse Out Nested Dictionaries into Pandas DataFrame
- JSON Naming Convention (snake_case, camelCase or PascalCase)
- How can I decode JSON with a key named 'Type' in Swift?
- Spotfire and Regex- Extracting Several Values Stored in One Column