Vega: Title and labels overlap on y axis

[david-littlefield]

Please:

• [x] Check for duplicate issues. Please file separate requests as separate issues on GitHub.
• [x] Describe how to reproduce the bug / the goal of the feature request.
• [x] Use the latest versions of Vega and Vega-Lite.
• [x] Provide an example spec in JSON, wrapped by triple backticks like this:
• [x] If applicable, include error messages and screenshots, GIF videos (e.g. using https://www.cockos.com/licecap/), or working examples (e.g. by clicking share in the Vega-Editor or https://bit.ly/vega-lite-blocks)

Running the following json specification should reproduce the problem, Vega Editor.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with ranged data (aka Gantt Chart).",
  "data": {
    "values": [{
      "company": "Crossman Career Builders",
      "startDate": 2017.25,
      "endDate": 2019.83,
      "duration": 2.58,
      "positionIndex": 1,
      "companyIndex": 1
    },
    {
      "company": "Career Killers/Career Builders: The Book Every Millennial Should Read",
      "startDate": 2017.25,
      "endDate": 2019.83,
      "duration": 2.58,
      "positionIndex": 1,
      "companyIndex": 2
    },
    {
      "company": "Florida State University",
      "startDate": 2015.33,
      "endDate": 2019.83,
      "duration": 4.5,
      "positionIndex": 2,
      "companyIndex": 3
    },
    {
      "company": "Florida State University",
      "startDate": 2007,
      "endDate": 2019.83,
      "duration": 12,
      "positionIndex": 1,
      "companyIndex": 3
    },
    {
      "company": "FAMU College Of Law",
      "startDate": 2019.58,
      "endDate": 2019.83,
      "duration": 0.25,
      "positionIndex": 1,
      "companyIndex": 4
    },
    {
      "company": "ULI Florida",
      "startDate": 2019.83,
      "endDate": 2019.83,
      "duration": 0,
      "positionIndex": 1,
      "companyIndex": 5
    },
    {
      "company": "Florida A&M University",
      "startDate": 2015.33,
      "endDate": 2019.83,
      "duration": 4.5,
      "positionIndex": 1,
      "companyIndex": 6
    },
    {
      "company": "Winter Park High School",
      "startDate": 2019.58,
      "endDate": 2019.83,
      "duration": 0.25,
      "positionIndex": 1,
      "companyIndex": 7
    },
    {
      "company": "AdventHealth",
      "startDate": 2013,
      "endDate": 2019.83,
      "duration": 6,
      "positionIndex": 1,
      "companyIndex": 8
    },
    {
      "company": "Orange County Government",
      "startDate": 2016.75,
      "endDate": 2019.83,
      "duration": 3.08,
      "positionIndex": 1,
      "companyIndex": 9
    },
    {
      "company": "Florida International University",
      "startDate": 2017.58,
      "endDate": 2019.83,
      "duration": 2.25,
      "positionIndex": 1,
      "companyIndex": 10
    },
    {
      "company": "UCF Downtown Campus",
      "startDate": 2018.75,
      "endDate": 2019.83,
      "duration": 1.08,
      "positionIndex": 1,
      "companyIndex": 11
    },
    {
      "company": "2004 Reverend Crossman Endowed Scholarship",
      "startDate": 2004.42,
      "endDate": 2019.83,
      "duration": 15.42,
      "positionIndex": 1,
      "companyIndex": 12
    },
    {
      "company": "University Of Florida Bergstrom Center For Real Estate Studies",
      "startDate": 2007,
      "endDate": 2019.83,
      "duration": 12,
      "positionIndex": 1,
      "companyIndex": 13
    },
    {
      "company": "ICSC",
      "startDate": 2016,
      "endDate": 2019.83,
      "duration": 3.83,
      "positionIndex": 8,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2014,
      "endDate": 2019.83,
      "duration": 5,
      "positionIndex": 7,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2011,
      "endDate": 2017.33,
      "duration": 6,
      "positionIndex": 6,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2014,
      "endDate": 2017,
      "duration": 3,
      "positionIndex": 5,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2012,
      "endDate": 2017,
      "duration": 5,
      "positionIndex": 4,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2008,
      "endDate": 2014,
      "duration": 6,
      "positionIndex": 3,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2012,
      "endDate": 2013,
      "duration": 1,
      "positionIndex": 2,
      "companyIndex": 14
    },
    {
      "company": "ICSC",
      "startDate": 2008,
      "endDate": 2011,
      "duration": 3,
      "positionIndex": 1,
      "companyIndex": 14
    },
    {
      "company": "University Of Florida",
      "startDate": 2015,
      "endDate": 2019.83,
      "duration": 4.83,
      "positionIndex": 1,
      "companyIndex": 15
    },
    {
      "company": "Shopping Center Business Magazine",
      "startDate": 2017,
      "endDate": 2019.83,
      "duration": 2.83,
      "positionIndex": 1,
      "companyIndex": 16
    },
    {
      "company": "Crossman & Company",
      "startDate": 2006.33,
      "endDate": 2019.83,
      "duration": 13.5,
      "positionIndex": 1,
      "companyIndex": 17
    },
    {
      "company": "Boys & Girls Clubs Of Central Florida",
      "startDate": 2015.42,
      "endDate": 2019,
      "duration": 3.58,
      "positionIndex": 1,
      "companyIndex": 18
    },
    {
      "company": "Valencia College",
      "startDate": 2014,
      "endDate": 2018,
      "duration": 4,
      "positionIndex": 1,
      "companyIndex": 19
    },
    {
      "company": "NAIOP",
      "startDate": 2014,
      "endDate": 2015.08,
      "duration": 1.08,
      "positionIndex": 1,
      "companyIndex": 20
    },
    {
      "company": "University Of Florida Online",
      "startDate": 2007,
      "endDate": 2010,
      "duration": 3,
      "positionIndex": 1,
      "companyIndex": 21
    },
    {
      "company": "Trammell Crow Company",
      "startDate": 2000,
      "endDate": 2006,
      "duration": 6,
      "positionIndex": 2,
      "companyIndex": 22
    },
    {
      "company": "Trammell Crow Company",
      "startDate": 1993,
      "endDate": 2006,
      "duration": 13,
      "positionIndex": 1,
      "companyIndex": 22
    }]
  },
  "title": {
    "text": "Positions at Company by Year",
    "fontSize": 24,
    "subtitle": "Number of positions held at the same time in chronological order",
    "subtitlePadding": 5,
    "offset": 20,
    "limit": 500
  },
  "mark": {
    "type": "bar"
  },
  "height": 500,
  "width": 1000,
  "autosize": "pad",
  "padding": 20,
  "encoding": {
    "y": {
      "field": "company", 
      "type": "nominal", 
      "axis": {
        "title": "Company",
        "titleFontSize": 16,
        "titleFontWeight": "normal",
        "titlePadding": 20        
      },
      "sort": {
        "field": "companyIndex", 
        "order": "ascending"
      }
    },
    "x": {
      "field": "startDate", 
      "type": "quantitative", 
      "scale": {
        "domain": [1993, 2020]
      }, 
      "axis": {
        "title": "Year",
        "titleFontSize": 16,
        "titleFontWeight": "normal",
        "titlePadding": 20,
        "format": "f",
        "labelFlush": false
      }
    },
    "x2": {
      "field": "endDate"
    },
    "color": {
      "field": "positionIndex", 
      "type": "ordinal", 
       "legend": {
          "title": "Position",
          "titleAnchor": start,
          "titleOrient":  "top",
          "offset": 20,
          "orient": "right",
          "direction": "vertical",
          "symbolSize": 500
      },
      "scale": {
        "range":[
          "8e8e93",
          "fc3d39", 
          "53d769", 
          "147efb", 
          "fc3158",
          "fd9426",
          "fecb2e",
          "5fc9f8"
        ]
      }, 
      "sort": [
        8, 
        7, 
        6, 
        5, 
        4, 
        3, 
        2 ,
        1
      ]
    },
    "order": {
      "field": "duration",
      "type": "ordinal",
      "sort": "descending" 
    }
  }
}

[domoritz]

The issue goes away when you remove the labelLimit. Of course, that's not a real solution but just wanted to point at the problem.

I boiled down the problem to a smaller spec.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {
        "company": "Career Killers/Career Builders: The Book Every Millennial Should Read",
        "startDate": 2017.25,
        "endDate": 2019.83,
        "duration": 2.58,
        "positionIndex": 1,
        "companyIndex": 2
      },
      {
        "company": "University Of Florida Bergstrom Center For Real Estate Studies",
        "startDate": 2007,
        "endDate": 2019.83,
        "duration": 12,
        "positionIndex": 1,
        "companyIndex": 13
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "company",
      "type": "nominal",
      "axis": {
        "title": "Company",
        "labelLimit": 400
      }
    }
  }
}

I can even reproduce this issue in just Vega.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "data": [
    {
      "name": "source_0",
      "values": [
        {
          "company": "Career Killers/Career Builders: The Book Every Millennial Should Read"
        },
        {
          "company": "University Of Florida Bergstrom Center For Real Estate Studies"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "y",
      "type": "band",
      "domain": {"data": "source_0", "field": "company"},
      "range": {"step": 20}
    }
  ],
  "axes": [
    {
      "scale": "y",
      "orient": "left",
      "title": "Company",
      "labelLimit": 400
    }
  ]
}

This looks like a Vega issue to me so I am going to move it.

[david-littlefield]

Thanks, @domoritz ! Removing the labelLimit seems to truncate the labels on the y-axis. Is there a way to display the full title and labels without overlapping?

[jheer]

The default axis maxExtent (the maximum offset for the axis title) is set to 200 in the default Vega config. This partners with the default labelLimit setting of 180. If you change the maxExtent to a larger value (for example, large enough to include your labelLimit, tickSize, labelPadding) then your issue will be resolved.

[david-littlefield]

Awesome, thank you @jheer !