Highcharts - Long multi-line y axis labels causing following label to be removed

highcharts, html, javascript

Solution

Simply set `step: 1`, see: http://jsfiddle.net/Yrygy/135/

Docs.

Problem

I have a need for some very long multi line labels on the y axis of a highcharts bar chart. My issue is that long, multi-line labels cause the following label to be removed - probably an internal overlap failsafe of some kind. I am at the point where I increased the label width so that i could control the word wrapping myself with line breaks (the internal word wrap also yields the same issue i am having with missing labels.) I'd love to be able to turn off this feature and deal with the overlap myself. Example: chart options: ``` { "colors": [ "#00AEEF" ], "credits": { "enabled": false }, "chart": { "type": "bar" }, "tooltip": {}, "plotOptions": { "column": { "pointPadding": 0.2, "borderWidth": 0 }, "series": { "borderWidth": 0, "dataLabels": { "enabled": true, "format": "{point.y:.1f}%" } } }, "series": [ { "showInLegend": false, "data": [ [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 70 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 62.5 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 41.25 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 26.25 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 18.75 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 11.25 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 7.5 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 3.75 ], [ "this is a pretty long label <br/>that will most likely cause the next<br/> row not to appear", 3.75 ] ] } ], "xAxis": { "minorGridLineWidth": 0, "minorTickLength": 0, "tickLength": 0, "type": "category", "labels": { "overflow": "justify", "style": { "color": "#525151", "fontSize": "12px", "lineHeight": "10%", "fontFamily": "Helvetica Neue, Helvetica ,Helvetica,Arial,sans-serif", "width": "999px" }, "y": -10 } }, "yAxis": { "min": 0, "title": { "text": "Percent (%)" } } } ```

Original source