How should I modify the code to ensure that the labels for the major categories (Breakdown Type marked in red on the screenshot) are positioned at the center of their respective background colors? Currently, their positions are misaligned.
I have grouped by "Breakdown Type Number" to find center position for the label, but looks like something is wrong and does not centered correctly...
Thank you in advance for your help!!
here is my code::
"layer": [
{
"description": "CATEGORY BACKGROUND",
"mark": {
"type": "rect",
"opacity": 0.2 // 透明度の調整
},
"encoding": {
"x": {
"field": "Breakdown",
"type": "ordinal",
"axis": {
"labelAngle": 25,
"title": null}
},
"y": {
"value": 0
},
"y2": {
"aggregate":{"argmax": "Total Amt"}
},
"color": {
"field": "Breakdown Type Number",
"type": "nominal",
"scale": {
"domainMin":{"expr": "minType"},
"domainMax":{"expr": "maxType"},
// Breakdown Typeの数値
"range": ["#FFDDC1", "#C1E1FF", "#D1FFC1", "#FFC1E1"] // 各カテゴリの背景色
},
"legend": null
}
}
},
{
"description": "Breakdown Type Labels",
"transform": [
{
"window": [
{"op": "min", "field": "Breakdown Number", "as": "minBreakdown"},
{"op": "max", "field": "Breakdown Number", "as": "maxBreakdown"},
{"op": "max", "field": "Total Amt", "as": "maxTotalAmt"}
],
"groupby": ["Breakdown Type Number"]
},
{
"calculate": "(datum.minBreakdown + datum.maxBreakdown) / 2",
"as": "centerBreakdown"
},
{
"window": [{"op": "max", "field": "maxTotalAmt", "as": "overallMaxTotalAmt"}]
},
{
"calculate": "datum.overallMaxTotalAmt * 1.05",
"as": "fixedLabelYPosition"
},
{
"aggregate": [
{"op": "mean", "field": "centerBreakdown", "as": "finalCenterBreakdown"},
{"op": "mean", "field": "fixedLabelYPosition", "as": "finalLabelYPosition"}
],
"groupby": ["Breakdown Type"]
}
],
"mark": {
"type": "text",
"align": "center",
"baseline": "bottom",
"fontSize": 12,
"fontWeight": "bold",
"dx": 0 // テキストの位置調整
},
"encoding": {
"x": {
"field": "finalCenterBreakdown",
"type": "quantitative"
},
"y": {
"field": "finalLabelYPosition",
"type": "quantitative"
},
"text": {
"field": "Breakdown Type",
"type": "nominal"
},
"color": {
"value": "black"
}
}
}```