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

admin管理员组

文章数量:1313347

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 (%)"
        }
    }
} 

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 (%)"
        }
    }
} 

• javascript
• html
• highcharts

Share Improve this question Follow edited May 10, 2014 at 18:17 scottysmalls asked May 10, 2014 at 18:05 scottysmallsscottysmalls 1,2711717 silver badges2424 bronze badges 4

• 1 Hi there. Im going to suggest you a possible work around. Put some short meaningful label to each category and add a tooltip which will aperar when you move the cursor over the bars, this tooltip should contain the long text. Here is a jsfiddle: jsfiddle/dWDE6/366 – Hristo Ivanov Commented May 10, 2014 at 21:05
• +1 because i'd love to. It's a client request =/ Very well may go that route if i can't figure this out though – scottysmalls Commented May 10, 2014 at 22:02
• hi. if you get your data from a request you can later on add the tooltip text. Here is a jsfiddle of how to add the text. Jsfiddle: jsfiddle/dWDE6/367 – Hristo Ivanov Commented May 10, 2014 at 22:09
• Thanks - not concerned about tooltips though. Stopping vertical y-axis labels from disappearing is the goal. – scottysmalls Commented May 11, 2014 at 2:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

Docs.

本文标签： javascriptHighchartsLong multiline y axis labels causing following label to be removedStack Overflow