Show y axis lines even though all values are zero
I am currently working on a grouped + stacked column chart in Vega. Is there a way to still display the y axis lines even with the data on both bars being all zero values?
Let's say I still want it to display minimum of 2 grid lines. Please see the second screenshot attached for the desired outcome.
Below is my current implementation.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 700,
"height": 370,
"autosize": {"type": "fit", "contains": "padding"},
"padding": {"bottom": 2, "right": 9, "left": 5},
"config": {
"axis": {
"labelFont": "HelveticaNeueLTW01-55Roman",
"titleFont": "HelveticaNeueLTW01-55Roman"
}
},
"data": [
{
"name": "income_and_expenses",
"values": [
{"label": "2012", "value1": 0, "value2": 0},
{"label": "2013", "value1": 0, "value2": 0},
{"label": "2014", "value1": 0, "value2": 0},
{"label": "2015", "value1": 0, "value2": 0},
{"label": "2016", "value1": 0, "value2": 0},
{"label": "2017", "value1": 0, "value2": 0},
{"label": "2018", "value1": 0, "value2": 0},
{"label": "2019", "value1": 0, "value2": 0},
{"label": "2020", "value1": 0, "value2": 0},
{"label": "2021", "value1": 0, "value2": 0},
{"label": "2022", "value1": 0, "value2": 0},
{"label": "2023", "value1": 0, "value2": 0},
{"label": "2024", "value1": 0, "value2": 0}
],
"transform": [
{"type": "formula", "expr": "split(datum.label, ' ')", "as": "label"}
]
},
{
"name": "parsed",
"source": ["income_and_expenses"],
"transform": [
{
"type": "aggregate",
"fields": ["value1", "value1", "value2", "value2"],
"ops": ["min", "max", "min", "max"],
"as": ["min_value1", "max_value1", "min_value2", "max_value2"]
},
{
"type": "formula",
"expr": "datum.max_value1 > datum.max_value2 ? abs(datum.max_value1) : abs(datum.max_value2)",
"as": "mergedMax"
},
{
"type": "formula",
"expr": "datum.min_value1 < datum.min_value2 ? abs(datum.min_value1) : abs(datum.min_value2)",
"as": "mergedMin"
},
{
"type": "formula",
"expr": "datum.mergedMax > datum.mergedMin ? datum.mergedMax : datum.mergedMin",
"as": "max"
},
{"type": "formula", "expr": "-(datum.max)", "as": "min"}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "income_and_expenses", "field": "label"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "parsed", "field": "limit"},
"domainMin": {"signal": "pluck(data('parsed'), 'min')"},
"domainMax": {"signal": "pluck(data('parsed'), 'max')"}
}
],
"axes": [
{
"orient": "bottom",
"scale": "x",
"zindex": 1,
"labelFontSize": 14,
"labelColor": "#85868C",
"labelAlign": "center",
"labelLineHeight": 19.6,
"labelFontWeight": "normal",
"labelPadding": 8,
"labelOpacity": 1,
"domain": false,
"domainColor": "#e5e5e5",
"domainWidth": 1,
"ticks": false,
"grid": true
},
{
"orient": "left",
"scale": "y",
"zindex": 0,
"labelFontSize": 14,
"labelColor": "#85868C",
"labelLineHeight": 19.6,
"labelFontWeight": "normal",
"labelPadding": 8,
"labelOpacity": 1,
"domain": false,
"domainColor": "#e5e5e5",
"grid": true,
"gridOpacity": 0.5,
"ticks": false,
"tickCount": 4,
"gridDash": {"signal": "datum.value == 0 ? [] : [4,4]"},
"encode": {
"labels": {
"update": {
"text": {
"signal": "if(abs(datum.value) >= 1e9, format(datum.value/1e9, '$,.1~f') + 'B', if(abs(datum.value) >= 1e6, format(datum.value/1e6, '$,.1~f') + 'M', if(abs(datum.value) >= 1e3, format(datum.value/1e3, '$,.1~f') + 'K', format(datum.value, '$,.2~f'))))"
}
}
}
}
}
],
"marks": [
{
"name": "income",
"type": "rect",
"from": {"data": "income_and_expenses"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "label", "band": 0.34},
"width": {"value": 16},
"y": {"scale": "y", "field": "value1"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#68abf2"},
"cornerRadiusTopLeft": {"signal": "datum.value1 > 0 ? '2' : '0'"},
"cornerRadiusTopRight": {"signal": "datum.value1 > 0 ? '2' : '0'"},
"cornerRadiusBottomLeft": {"signal": "datum.value1 > 0 ? '0' : '2'"},
"cornerRadiusBottomRight": {"signal": "datum.value1 > 0 ? '0' : '2'"}
}
}
},
{
"name": "expenses",
"type": "rect",
"from": {"data": "income_and_expenses"},
"encode": {
"enter": {
"x": {
"scale": "x",
"field": "label",
"band": 0.34,
"offset": {
"signal": "datum.value1 > 0 && datum.value2 > 0 || datum.value1 < 0 && datum.value2 < 0 ? 20 : 0"
}
},
"width": {"value": 16},
"y": {"scale": "y", "field": "value2"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#f7615c"},
"cornerRadiusTopLeft": {"signal": "datum.value2 > 0 ? '2' : '0'"},
"cornerRadiusTopRight": {"signal": "datum.value2 > 0 ? '2' : '0'"},
"cornerRadiusBottomLeft": {"signal": "datum.value2 > 0 ? '0' : '2'"},
"cornerRadiusBottomRight": {"signal": "datum.value2 > 0 ? '0' : '2'"}
}
}
}
]
}
Solution
Set you domainMin and domainMax:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 700,
"height": 370,
"autosize": {"type": "fit", "contains": "padding"},
"padding": {"bottom": 2, "right": 9, "left": 5},
"config": {
"axis": {
"labelFont": "HelveticaNeueLTW01-55Roman",
"titleFont": "HelveticaNeueLTW01-55Roman"
}
},
"data": [
{
"name": "income_and_expenses",
"values": [
{"label": "2012", "value1": 0, "value2": 0},
{"label": "2013", "value1": 0, "value2": 0},
{"label": "2014", "value1": 0, "value2": 0},
{"label": "2015", "value1": 0, "value2": 0},
{"label": "2016", "value1": 0, "value2": 0},
{"label": "2017", "value1": 0, "value2": 0},
{"label": "2018", "value1": 0, "value2": 0},
{"label": "2019", "value1": 0, "value2": 0},
{"label": "2020", "value1": 0, "value2": 0},
{"label": "2021", "value1": 0, "value2": 0},
{"label": "2022", "value1": 0, "value2": 0},
{"label": "2023", "value1": 0, "value2": 0},
{"label": "2024", "value1": 0, "value2": 0}
],
"transform": [
{"type": "formula", "expr": "split(datum.label, ' ')", "as": "label"}
]
},
{
"name": "parsed",
"source": ["income_and_expenses"],
"transform": [
{
"type": "aggregate",
"fields": ["value1", "value1", "value2", "value2"],
"ops": ["min", "max", "min", "max"],
"as": ["min_value1", "max_value1", "min_value2", "max_value2"]
},
{
"type": "formula",
"expr": "datum.max_value1 > datum.max_value2 ? abs(datum.max_value1) : abs(datum.max_value2)",
"as": "mergedMax"
},
{
"type": "formula",
"expr": "datum.min_value1 < datum.min_value2 ? abs(datum.min_value1) : abs(datum.min_value2)",
"as": "mergedMin"
},
{
"type": "formula",
"expr": "datum.mergedMax > datum.mergedMin ? datum.mergedMax : datum.mergedMin",
"as": "max"
},
{"type": "formula", "expr": "-(datum.max)", "as": "min"}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"range": "width",
"domain": {"data": "income_and_expenses", "field": "label"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "parsed", "field": "limit"},
"domainMin": {"signal": "-1"},
"domainMax": {"signal": "1"}
}
],
"axes": [
{
"orient": "bottom",
"scale": "x",
"zindex": 1,
"labelFontSize": 14,
"labelColor": "#85868C",
"labelAlign": "center",
"labelLineHeight": 19.6,
"labelFontWeight": "normal",
"labelPadding": 8,
"labelOpacity": 1,
"domain": false,
"domainColor": "#e5e5e5",
"domainWidth": 1,
"ticks": false,
"grid": true
},
{
"orient": "left",
"scale": "y",
"zindex": 0,
"labelFontSize": 14,
"labelColor": "#85868C",
"labelLineHeight": 19.6,
"labelFontWeight": "normal",
"labelPadding": 8,
"labelOpacity": 1,
"domain": false,
"domainColor": "#e5e5e5",
"grid": true,
"gridOpacity": 0.5,
"ticks": false,
"tickCount": 4,
"gridDash": {"signal": "datum.value == 0 ? [] : [4,4]"},
"encode": {
"labels": {
"update": {
"text": {
"signal": "if(abs(datum.value) >= 1e9, format(datum.value/1e9, '$,.1~f') + 'B', if(abs(datum.value) >= 1e6, format(datum.value/1e6, '$,.1~f') + 'M', if(abs(datum.value) >= 1e3, format(datum.value/1e3, '$,.1~f') + 'K', format(datum.value, '$,.2~f'))))"
}
}
}
}
}
],
"marks": [
{
"name": "income",
"type": "rect",
"from": {"data": "income_and_expenses"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "label", "band": 0.34},
"width": {"value": 16},
"y": {"scale": "y", "field": "value1"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#68abf2"},
"cornerRadiusTopLeft": {"signal": "datum.value1 > 0 ? '2' : '0'"},
"cornerRadiusTopRight": {"signal": "datum.value1 > 0 ? '2' : '0'"},
"cornerRadiusBottomLeft": {"signal": "datum.value1 > 0 ? '0' : '2'"},
"cornerRadiusBottomRight": {"signal": "datum.value1 > 0 ? '0' : '2'"}
}
}
},
{
"name": "expenses",
"type": "rect",
"from": {"data": "income_and_expenses"},
"encode": {
"enter": {
"x": {
"scale": "x",
"field": "label",
"band": 0.34,
"offset": {
"signal": "datum.value1 > 0 && datum.value2 > 0 || datum.value1 < 0 && datum.value2 < 0 ? 20 : 0"
}
},
"width": {"value": 16},
"y": {"scale": "y", "field": "value2"},
"y2": {"scale": "y", "value": 0},
"fill": {"value": "#f7615c"},
"cornerRadiusTopLeft": {"signal": "datum.value2 > 0 ? '2' : '0'"},
"cornerRadiusTopRight": {"signal": "datum.value2 > 0 ? '2' : '0'"},
"cornerRadiusBottomLeft": {"signal": "datum.value2 > 0 ? '0' : '2'"},
"cornerRadiusBottomRight": {"signal": "datum.value2 > 0 ? '0' : '2'"}
}
}
}
]
}
- 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