I am trying to create a group bar chart with text label. I am trying to disappear y axis label when value is greater then 100 means (100%)because when valuuw is excatly 100 then label(text on top of bar) get out of chart that look different for this i fix domainMax but i create another problem showing label which never be greater then 100.
i want text(over bar) come inside and label greater then 100 cannot be display. Editor link
Required Output
Try this:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category": "A", "group": "x", "percentage": 10},
{"category": "A", "group": "y", "percentage": 85},
{"category": "A", "group": "z", "percentage": 40},
{"category": "B", "group": "x", "percentage": 50},
{"category": "B", "group": "y", "percentage": 60},
{"category": "B", "group": "z", "percentage": 90},
{"category": "C", "group": "x", "percentage": 80},
{"category": "C", "group": "y", "percentage": 100},
{"category": "C", "group": "z", "percentage": 0}
]
},
"params": [{"name": "paintbrush", "value": "datum['percentage']"}],
"encoding": {
"x": {"field": "category"},
"y": {
"field": "percentage",
"type": "quantitative",
"axis": {
"labelExpr": "datum.value+'%'",
"grid": false,
"values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
},
"scale": {"nice": false}
},
"xOffset": {"field": "group"}
},
"layer": [
{"mark": "bar", "encoding": {"color": {"field": "group"}}},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dy": 10,
"color": {"expr": "datum.percentage >= 100 ? 'transparent' :'white'"}
},
"encoding": {"text": {"field": "percentage", "type": "quantitative"}}
},
{
"mark": "point",
"encoding": {
"y": {"field": "maxPC", "type": "quantitative"},
"color": {"value": "transparent"}
}
}
]
}
Here is another alternative:
In the spec below I first find the max of the percentage column, then add 9% of this to push the scale of Y axis higher. Some other formatting tweaks also.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category": "A", "group": "x", "percentage": 10},
{"category": "A", "group": "y", "percentage": 85},
{"category": "A", "group": "z", "percentage": 40},
{"category": "B", "group": "x", "percentage": 50},
{"category": "B", "group": "y", "percentage": 60},
{"category": "B", "group": "z", "percentage": 90},
{"category": "C", "group": "x", "percentage": 80},
{"category": "C", "group": "y", "percentage": 100},
{"category": "C", "group": "z", "percentage": 0}
]
},
"transform": [
{
"joinaggregate": [{"op": "max", "field": "percentage", "as": "maxPCTemp"}]
},
{"calculate": "datum.maxPCTemp * 1.09", "as": "maxPC"}
],
"params": [{"name": "paintbrush", "value": "datum['percentage']"}],
"encoding": {
"x": {"field": "category"},
"y": {
"field": "percentage",
"type": "quantitative",
"axis": {
"labelExpr": "datum.value+'%'",
"grid": false,
"values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
},
"scale": {"nice": false}
},
"xOffset": {"field": "group"}
},
"layer": [
{"mark": "bar", "encoding": {"color": {"field": "group"}}},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dy": -7,
"opacity": {"expr": "datum.value== 0 ? 0 :1"}
},
"encoding": {"text": {"field": "percentage", "type": "quantitative"}}
},
{
"mark": "point",
"encoding": {
"y": {
"field": "maxPC",
"type": "quantitative",
"axis": {
"labelExpr": "datum.value+'%'",
"values": {"expr": "[0,10,20,30,40,50,60,70,80,90,100]"}
}
},
"color": {"value": "transparent"}
}
}
]
}