Highcharts yaxis labels cut off/overflow

0
votes

Please have a look at the following chart http://jsfiddle.net/klodoma/5d24xt39/

As you can see the YAxis labels are cut off at the top, they are not aligned properly.

Any ideas? 

  "yAxis": [{
    "labels": {
      "enabled": true,
      "style": {
        "fontSize": 25,
      }
    },
    "title": {
      "text": "",
    }
  }],

enter image description here

1
highcharts
Works fine in Firefox. Chrome seems to do something weird with the font...? – jlbriggs
Hmm, FF ignores completly the fontSize; If I change it to "fontSize": "25px" looks a bit better. – klodoma

1 Answers

2
votes

An argument for the fontSize should be string, like '12px'.

If you specify such a big font size with floating title, add some top margin, e.g. half of the font size.

 "chart": {
    marginTop: 25,
  ...

"yAxis": [{
  "opposite": false,
    "labels": {
      "enabled": true,
      "style": {
        "color": "#d9d9d9",
        "fontSize": '45px',
      }
    },
    "title": {
      "text": "",
    }
  }],

example: http://jsfiddle.net/t1ehqzv0/