Text wrapping axis tick labels breaks stacked bar chart

[danlewis85]

Bug Description

I want to create a stacked bar chart, but my axis labels are long so ideally I'd like to wrap the text.

Here is the desired output without wrapping vega editor link.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "data": {
    "name": "data-e8dbb78e76226aa05b2ea6ce39724b21"
  },
  "datasets": {
    "data-e8dbb78e76226aa05b2ea6ce39724b21": [
      {
        "response": "yes",
        "value": 80,
        "variable": "Really long variable name number 1"
      },
      {
        "response": "maybe",
        "value": 40,
        "variable": "Really long variable name number 1"
      },
      {
        "response": "no",
        "value": 12,
        "variable": "Really long variable name number 1"
      },
      {
        "response": "yes",
        "value": 60,
        "variable": "Seriously long variable name number 2"
      },
      {
        "response": "maybe",
        "value": 50,
        "variable": "Seriously long variable name number 2"
      },
      {
        "response": "no",
        "value": 22,
        "variable": "Seriously long variable name number 2"
      }
    ]
  },
  "encoding": {
    "color": {
      "field": "response",
      "sort": [
        "yes",
        "maybe",
        "no"
      ],
      "type": "ordinal"
    },
    "order": {
      "field": "color_response_sort_index",
      "type": "quantitative"
    },
    "x": {
      "field": "value",
      "stack": "normalize",
      "title": "Percentage of Visitors",
      "type": "quantitative"
    },
    "y": {
      "axis": {
        "labelLimit": 350
      },
      "field": "variable",
      "title": "",
      "type": "nominal"
    }
  },
  "height": 200,
  "mark": {
    "type": "bar"
  },
  "width": 500
}

Now if I wrap the 'variable' text over multiple lines using a collection, the stacked bars break as in this example vega editor link:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "data": {
    "name": "data-00e711a020ed06f24288e7f5cd8c2863"
  },
  "datasets": {
    "data-00e711a020ed06f24288e7f5cd8c2863": [
      {
        "response": "yes",
        "value": 80,
        "variable": [
          "Really long variable",
          "name number 1"
        ]
      },
      {
        "response": "maybe",
        "value": 40,
        "variable": [
          "Really long variable",
          "name number 1"
        ]
      },
      {
        "response": "no",
        "value": 12,
        "variable": [
          "Really long variable",
          "name number 1"
        ]
      },
      {
        "response": "yes",
        "value": 60,
        "variable": [
          "Seriously long",
          "variable name number",
          "2"
        ]
      },
      {
        "response": "maybe",
        "value": 50,
        "variable": [
          "Seriously long",
          "variable name number",
          "2"
        ]
      },
      {
        "response": "no",
        "value": 22,
        "variable": [
          "Seriously long",
          "variable name number",
          "2"
        ]
      }
    ]
  },
  "encoding": {
    "color": {
      "field": "response",
      "sort": [
        "yes",
        "maybe",
        "no"
      ],
      "type": "ordinal"
    },
    "order": {
      "field": "color_response_sort_index",
      "type": "quantitative"
    },
    "x": {
      "field": "value",
      "stack": "normalize",
      "title": "Percentage of Visitors",
      "type": "quantitative"
    },
    "y": {
      "axis": {
        "labelLimit": 350
      },
      "field": "variable",
      "title": "",
      "type": "nominal"
    }
  },
  "height": 200,
  "mark": {
    "type": "bar"
  },
  "width": 500
}

Is there any way I can work around this? I'd really like to be able to wrap the label text.

Checklist

• [x ] I checked for duplicate issues.

[MarcBaeuerle]

Wrapping label text is done through using arrays, so this is correct. Unfortunately this is an issue with Vega as a Map() is used to calculate the position of the bars. Since an array is used as a key, getting the value of the key only works if the same reference is provided. I’ve tried converting the array to strings first but that introduces other problems I don’t know how to deal with yet.

Im leaving this comment as a pointer if anyone else takes a look. Issue starts here Encode.js (Line 47) after count = 150 here run.js (Line 71).

Vega spec: